CSS의 object-fit 속성은 <img>나 <video> 같은 대체 요소(replaced element)의 콘텐츠를 지정된 컨테이너 크기에 맞게 조절할 때 사용합니다. 원본 콘텐츠의 비율을 유지하거나, 컨테이너를 꽉 채우거나, 잘라내는 등 다양한 방식으로 표시할 수 있습니다.
object-fit의 주요 속성 값
- contain: 콘텐츠의 가로세로 비율을 유지하면서 컨테이너 안에 전체가 들어가도록 크기를 조절합니다. 빈 공간이 생길 수 있습니다.
- cover: 콘텐츠의 비율을 유지하면서 컨테이너를 꽉 채우도록 확대하며, 넘치는 부분은 잘려나갑니다(클리핑).
- fill: 기본값으로, 콘텐츠 박스를 가득 채웁니다. 필요한 경우 비율이 늘어나거나 찌그러질 수 있습니다.
- none: 콘텐츠의 원래 크기를 그대로 유지하며, 컨테이너보다 클 경우 잘립니다.
- scale-down: none과 contain 중 더 작은 크기로 표시되는 값을 적용합니다.
예제 코드
아래 예제는 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>
object-fit 속성은 반응형 웹 디자인에서 특히 유용합니다. 카드 레이아웃이나 갤러리처럼 서로 다른 비율의 이미지를 일정한 크기로 표시해야 할 때, cover 값을 사용하면 이미지가 찌그러지지 않으면서도 영역을 깔끔하게 채울 수 있습니다.