Next.js Image Resize

Next.js에서 이미지를 사용할 때는 <img> 태그를 쓰지말고 next/image의 Image를 사용하라고 권고한다.

 

이 때 이미지를 비율을 유지하면서 크기를 조절하고 싶을 때는 layout="fill"을 사용하면 된다.

import Image from "next/image";
import styled from "@emotion/styled";


const Container = styled.div`
	width: '100%';
    	height: '100%';
	position: relative;
`

<Container>
    <Image
        layout="fill"
        src="/assets/images/partners/icon-company_3.png"
        alt="company3"
      />
</Container>

 

그런데 특히 특정 크기로 줄이고 싶을 때는 그냥 원초적인 방법으로 아래 방법을 사용했다. 원래 이미지의 크기가 624 * 210 이라서 그 비율에 따라서 height를 구해줬다. 너무 원초적인가? 난 되기만 하면 된다.

import Image from "next/image";
import styled from "@emotion/styled";


const Container = styled.div`
	position: relative;
`

<Container>
    <Image
        width={240}
        height={(240 / 624) * 210}
        layout="fixed"
        src="/assets/images/partners/icon-company_3.png"
        alt="company3"
      />
</Container>

 

 

 

전체 크게에 모두 차게 만들고 싶을 때는 layout="fill"과 objectFit="cover"를 동시에 활용하자

import Image from "next/image";

<Image
  src={imgUrl}
  layout={"fill"}
  objectFit={"cover"}
  priority={true}
  alt={"bg1"}
/>