[Tailwind] image 배치

<div> 로 묶은 블록 다음에 다른 <div>블록을 그리려고 하는데, 어떻게 해야할까?

block 옵션을 주어도 div간 구분이 안되고 겹쳐서 rendering이 되었다.

import type { GetServerSideProps, NextPage } from "next";
import Image from "next/image";
import background from "../images/background.jpg";

const Body = ({}) => {
  return (
    <div>
      <div className="block container mx-auto px-4">
        <Image className="opacity-25" src={background} alt="background" layout="fill"></Image>
      </div>

      <div className="block">
        <>Another Body!</>
      </div>
    </div>
  );
};

export default Body;

 

그림과 겹쳐져 나타나는 "Another Body!"

크롬 개발자 도구로 그림을 찍어보니 다음과 같이 나타났다

background라는 이미지 파일이 창 전체를 덮고 있었는데, 아무래도 저 부분이 문제인 것 같다. layout옵션을 제거해보았다.

정상적이게 <div> 블록 순서대로 출력되는 모습이다.

정상적으로 <div> 블록 순서대로 출력되는 모습이다. 그럼 컨테이너나 블록만을 채우도록 그림을 resize하는 방법은 무엇이 있을까? 바로 objectFit이다.

 

 

<Image
  className="opacity-25 object-fill w-full h-full"  //Tailwind에서 처리
  objectFit="fill"                                  //Next Image에서 처리
/>