React tailwindCSS image

사이드 프로젝트를 하면서 tailwind를 사용하여 이미지를 처리하려는데 이미지가 늘어난 것 처럼 보이는 현상이 발생했다.

한 눈에 보기에는 큰 차이가 없어보이지만 이미지가 찌그러진것 처럼 보였기 때문에 크기와 위치는 그대로 고정하면서
이미지의 원본크기를 유지하는 방법이 뭐가 있을까 하여 알아본 결과로 tailwind 공식문서에 다양한 옵션들이 있었다.

• object-cover
  컨테이너를 덮도록 요소의 콘텐츠 크기를 조정할 수 있음
• object-contain
  컨테이너 내에 포함되도록 요소의 콘텐츠 크기를 조정할 수 있음
• object-fill
  요소의 내용을 늘려서 컨테이너에 맞출 수 있음
• object-scale-down
  컨테이너 크기에 맞게 크기를 줄일 수 있음
• object-none
  컨테이너 크기를 무시하고 요소의 콘텐츠를 원래 크기로 표시할 수 있음

이렇게 다양한 옵션들이 있는데 공식문서의 사이트는 아래와 같다.

https://tailwindcss.com/docs/object-fit

Object Fit - Tailwind CSS

 

그리고나서 프로젝트에 object-cover 옵션을 사용해서 나온 결과는

 

이미지가 좀 더 늘어나서 꾸겨짐이 없는 것 처럼 보이게 됐다.