object-fit 속성

CSS의 object-fit 속성은 이미지나 비디오와 같은 대체 요소(replaced element)의 콘텐츠 크기를 어떻게 조정할지 결정하는데 사용됩니다. 이 속성은 요소의 가로 세로 비율을 유지하면서, 지정된 너비와 높이에 맞게 콘텐츠를 채우거나, 콘텐츠를 자르거나, 또는 콘텐츠의 원래 크기를 유지하는 등의 동작을 정의합니다.

object-fit 속성을 사용하면, 개발자는 콘텐츠의 가로 세로 비율을 유지하면서도, 다양한 디스플레이 크기와 해상도에 맞게 콘텐츠를 적절히 조정할 수 있습니다. 이를 통해 사용자에게 보다 일관된 시각적 경험을 제공할 수 있습니다.

object-fit 속성은 주로 비주얼 콘텐츠를 다룰 때 유용하며, 웹 개발에서 사용자 인터페이스의 시각적 일관성을 유지하는 데 큰 도움이 됩니다.

 

object-fit 속성은 다음과 같은 값을 가질 수 있습니다:

• fill: 기본값. 콘텐츠의 원래 비율을 무시하고, 요소의 전체 영역을 채웁니다.
• contain: 콘텐츠의 비율을 유지하면서, 요소의 전체 영역에 맞출 수 있을 만큼 최대한 확대합니다. 콘텐츠가 요소의 일부 영역을 채우지 못할 수도 있습니다.
• cover: 콘텐츠의 비율을 유지하면서, 요소의 전체 영역을 채우도록 콘텐츠를 확대합니다. 콘텐츠의 일부가 잘릴 수 있습니다.
• none: 콘텐츠의 원래 크기를 유지합니다. 요소의 크기와 관계없이 콘텐츠가 잘리거나 여백이 생길 수 있습니다.
• scale-down: none과 contain 중 작은 쪽에 따라 콘텐츠의 크기가 조정됩니다.

다음 예제는 .container 요소 안에 이미지를 채우는데, 이미지의 가로, 세로 비율을 그대로 유지하면서 채웁니다. 

 

.container img {
  width: 200px; /* 요소의 너비 */
  height: 200px; /* 요소의 높이 */
  object-fit: cover; /* 콘텐츠가 요소를 완전히 채우도록 조정, 필요한 경우 콘텐츠를 자름 */
}