TailwindCSS | 반응형으로 내부 이미지 정사각형 유지

<div className={`relative w-1/2
after:block after:pb-[100%] after:content-['']`}>
  <Image
    src={src}
    alt={alt}
    fill
    ref={imageRef}
    className={'absolute'}
    />
</div>

next/image 에 fill 만 사용하면
기존 이미지 비율을 무시하고 부모 요소에 가득 채우게 된다

아래와 같이 object-contain 과 함께 사용 시
기존 이미지의 비율을 유지할 수 있다

<div
  className={`relative min-h-16 w-full min-w-16 after:block after:pb-[100%] after:content-['']`}
>
  <Image
    src={src}
    alt={alt}
    {...imageProps}
    fill
    className={'absolute w-full object-contain'}
    />
</div>