웹 페이지를 만들다 보면 지정된 컨테이너 크기에 맞춰 이미지나 비디오가 찌그러지거나, 여백이 생기는 문제를 겪게 됩니다. 이럴 때 CSS의 object-fit 속성을 사용하면 콘텐츠가 컨테이너 안에서 어떻게 채워질지 손쉽게 제어할 수 있습니다.
object-fit 속성이란?
object-fit은 <img>나 <video> 같은 대체 요소(replaced element)의 콘텐츠가 지정된 너비와 높이에 맞게 조정되는 방식을 결정합니다. 주요 값은 다음과 같습니다.
- fill – 기본값입니다. 가로세로 비율을 무시하고 컨테이너를 꽉 채우므로 이미지가 늘어나거나 찌그러질 수 있습니다.
- contain – 원본 비율을 유지하면서 컨테이너 안에 전체 콘텐츠가 들어가도록 축소합니다.
- cover – 원본 비율을 유지하면서 컨테이너를 완전히 덮도록 확대하며, 넘치는 부분은 잘립니다.
- none – 크기를 조정하지 않고 원본 크기 그대로 표시합니다.
- scale-down – none과 contain 중 더 작게 표시되는 방식을 적용합니다.
예제 코드
아래 예제는 250×350px 크기의 컨테이너에 object-fit: fill을 적용해 이미지를 맞추는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.myimg {
width:250px;
height:350px;
object-fit:fill;
}
</style>
</head>
<body>
<h2>SWIFT</h2>
<img class = "myimg" src = "https://www.tutorialspoint.com/assets/videos/courses/67/images/course_67_image.png"
alt = "Python Data Science" width = "300" height = "200">
</body>
</html>비율 유지가 필요할 때
fill은 이미지를 왜곡시킬 수 있으므로, 원본 비율을 유지하면서 영역을 꽉 채우고 싶다면 cover 값을 사용하는 것이 좋습니다.
.myimg {
width:250px;
height:350px;
object-fit:cover;
}이렇게 하면 이미지가 왜곡되지 않으면서 컨테이너 전체를 자연스럽게 채울 수 있습니다. 비디오 요소에도 동일하게 적용할 수 있으니, 반응형 웹 디자인에서 썸네일이나 배경 미디어를 다룰 때 object-fit을 적극 활용해 보세요.