🎨 object-fit으로 이미지 크기 조절하기

프로젝트를 진행하면서 다양한 이미지를 반복적으로 map에 활용해서 보여주는 작업을 하게 되었습니다
해당 작업을 진행할 때, 각각 이미지 크기가 전부 다르고, 비율도 다르기 때문에
width 와 height를 강제로 설정하였을때 비율이 깨지는 문제가 발생했습니다. 이것을 해결하기 위한 object-fit 속성에 대해 알아보겠습니다

👉 이미지의 원래 크기

이미지는 아무것도 설정하지 않으면 본래의 크기,비율을 그대로 브라우저에 보여줍니다

<!-- 본래 너비 100px / 본래 높이 200px -->
<img src="https://dummyimage.com/100x200.png" />

📌 자동 설정

이 때 원래 의도 크기와 다를 경우, width 와 height 둘 중 하나만 설정하면 비율을 유지하면서 자동으로 이미지 크기를 조절해줍니다

<!-- 너비를 2배인 200px로 지정하면 높이도 2배인 400px 자동 증가 -->
<img src="https://dummyimage.com/100x200.png" width="200px" />

<!-- 높이를 0.5배인 100px로 지정하면 너비도 0.5배인 50px로 자동 축소 -->
<img src="https://dummyimage.com/100x200.png" height="100px" />

📌 강제 설정

만약 width 와 height 두 값 모두를 설정하면,
가로세로 비율이 동일한 경우는 문제 없지만, 비율이 다른 경우 찌그러져 보이는 현상이 발생합니다. 이러한 현상이 object-fit 을 사용하지 않은 경우 발생하는 문제의 대표적인 예시입니다.

<img src="https://dummyimage.com/150x150.png" width="200px" height="200px" />
<img src="https://dummyimage.com/300x100.png" width="200px" height="200px" />
<img src="https://dummyimage.com/100x300.png" width="200px" height="200px" />

⚡ object-fit: cover

이미지의 원래 비율을 지킬 때 사용 (비율만 맞춤, 잘리는 위험 존재)

이미지의 원래 비율을 지키려면, 어쩔수 없이 포기해야 하는 부분이 생깁니다.
가로로 긴 비율의 이미지라면, 좌우가 짤리게 되고
세로로 긴 비율의 이미지라면, 상하가 짤리는 것을 감수해야하죠.

img {
  object-fit: cover;
}

object-fit: cover 옵션은 썸네일이나, 미리보기, 여러 이미지를 보여주는 그리드 형식에 자주 사용됩니다.
프로젝트에서 제가 맡은 부분의 작업에 적합하기 때문에, cover를 채택해서 사용했습니다.

⚡ object-fit: contain

이미지가 깨지기 않고 원래의 비율을 그대로 유지시키고 싶을 때 사용

해당 옵션을 사용하면 비율은 그대로 유지되지만, 이미지가 작아져서 여백이 생기는 현상을 감수해야 합니다.

img {
  object-fit: contain;
}

해당 옵션이 적용된 상태에서, 이미지에 준 width 와 height이 일치하지 않으면
가로로 긴 이미지는 상하여백이,
세로로 긴 이미지는 좌우여백이 생깁니다

object-fit: contain 옵션은 이미지 원본의 비율 그대로를 보여주고 싶을 때 사용합니다. 특히 이미지 안에 중요한 텍스트가 있는 경우 자주 사용됩니다.

⚡ object-fit: none

width 와 height를 무시하고 이미지 원본의 크기대로 보여주고 싶을 때 사용

img {
  object-fit: none;
}

이 옵션은 object-fit: contain 옵션과 유사해보이지만,
이미지 전체가 비율에 맞지 않을때, 주어진 영역에 넣기 위해 임의로 이미지의 너비나 높이를 조절하지 않습니다.

예를 들어, 아래에서 첫 번째 이미지 주변으로는 25px의 빈 공간이 생기는 것을 볼 수 있는데요. width 속성과 height 속성이 모두 200px로 지정되어 있고 여기서 이미지의 본래 가로 세로 길이인 150px을 빼면 50px이 남으며 이것을 상하 좌우 공백이 이 등분하여 가져가기 때문입니다.

두 번째 이미지의 높이는 본래 높이인 100px로 표시되고 좌우로는 50px 씩 이미지가 짤려서 보이지 않게 되는데요. 이미지의 본래 너비가 300px인데 여기서 width 속성 값으로 지정된 200px를 빼면 100px이 남기 때문입니다.

세 번째 이미지의 경우에는 이미지의 본래 높이가 height 속성 값보다 100px이 크기 때문에 상하로 50px 씩 이미지가 짤리게 됩니다.

정리하자

정해진 영역에 이미지를 비율 그대로 넣고 싶다 + 확대 ok? 👉 object-fit: cover
정해진 영역에 이미지를 비율 그대로 넣고 싶다 + 축소 ok? 👉 object-fit: contain