object-fit 속성은 이미지나 동영상 같은 요소를 부모 요소 안에 어떻게 맞출지를 결정하는 속성입니다. 이 속성은 특히 다양한 크기의 이미지를 고정된 크기의 박스에 넣을 때 유용합니다.
object-fit의 주요 값에는 fill, contain, cover, none, scale-down 등이 있습니다. 이 중에서 cover와 contain이 가장 많이 사용됩니다.
object-fit: cover;
cover 값은 이미지나 동영상의 크기를 조절해서 부모 요소를 완전히 덮도록 만듭니다. 이 과정에서 요소의 가로 세로 비율(aspect ratio)은 유지됩니다. 부모 요소를 덮기 위해 이미지가 잘릴 수 있습니다.
object-fit: contain;
contain 값은 이미지나 동영상의 크기를 조절해서 부모 요소 안에 완전히 맞추도록 만듭니다. 이 과정에서 요소의 가로 세로 비율은 유지됩니다. 부모 요소를 완전히 채우기 위해 이미지가 늘어나지 않기 때문에, 요소의 어느 한 축(가로 또는 세로)에 여백이 생길 수 있습니다.
cover: 이미지가 부모 요소를 완전히 덮도록 크기를 조정합니다. 이미지의 일부가 잘릴 수 있습니다.contain: 이미지가 부모 요소 안에 완전히 들어가도록 크기를 조정합니다. 이미지의 비율은 유지되지만, 부모 요소에 빈 공간이 생길 수 있습니다.💡 추가 속성 알아보기
fill: 부모 요소의 크기에 맞도록 콘텐츠가 늘어나거나 축소됩니다. 비율이 유지되지 않아 왜곡될 수 있습니다.none: 콘텐츠가 원래 크기를 유지하며, 부모 요소를 벗어날 수 있습니다.scale-down: 콘텐츠가 원래 크기와contain크기 중 더 작은 크기로 조정됩니다.
💥 대부분의 웹사이트에서는
object-fit: cover를 사용합니다.
- 일관된 레이아웃: 이미지가 부모 요소의 크기에 맞춰지기 때문에 레이아웃이 항상 일관되게 유지됩니다. 이미지는 부모 요소의 크기에 맞춰 잘리더라도 전체 요소를 덮어 주므로 빈 공간이 생기지 않습니다.
- 유연한 반응형 디자인: 반응형 디자인에서 이미지 크기를 유연하게 조정할 수 있어 다양한 화면 크기와 해상도에서도 일관된 경험을 제공합니다.