CSS object-fit 속성이란?
CSS의 object-fit 속성은 이미지(img)나 동영상(video) 같은 대체 요소(replaced element)가 자신을 감싸는 컨테이너에 어떻게 맞춰질지를 결정합니다. 고정된 너비와 높이를 가진 박스 안에 콘텐츠를 배치할 때, 원본 비율을 유지하거나 필요한 부분만 잘라내는 등 다양한 방식으로 크기를 조절할 수 있어 반응형 웹 디자인에서 매우 유용하게 사용됩니다.
object-fit의 주요 값
- fill (기본값): 컨테이너 크기에 맞게 콘텐츠를 늘려 채웁니다. 원본 비율이 깨질 수 있습니다.
- contain: 원본 비율을 유지하면서 컨테이너 안에 전체 콘텐츠가 들어가도록 조절합니다. 빈 공간이 생길 수 있습니다.
- cover: 원본 비율을 유지하면서 컨테이너를 꽉 채우고, 넘치는 부분은 잘려나갑니다.
- none: 크기를 조절하지 않고 원본 크기 그대로 표시합니다.
- scale-down: none과 contain 중 더 작은 크기로 표시되는 방식을 선택합니다.
예제 코드
다음 코드는 object-fit: cover;를 적용하여 이미지가 지정된 크기의 컨테이너를 꽉 채우도록 만드는 예시입니다. 직접 실행해 보면서 속성의 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.myimg {
width:250px;
height:350px;
object-fit:cover;
}
</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>실행 결과 설명
위 예제에서 이미지는 250×350픽셀 크기의 영역에 배치됩니다. object-fit: cover;가 적용되었기 때문에 원본 이미지의 가로세로 비율은 그대로 유지되면서, 컨테이너를 가득 채우기 위해 넘치는 부분은 잘려서 표시됩니다. 만약 이 값을 contain으로 바꾸면 이미지 전체가 보이지만 여백이 생기고, 기본값인 fill을 사용하면 비율과 관계없이 강제로 늘어나 이미지가 찌그러져 보일 수 있습니다.
마무리
object-fit 속성은 썸네일, 카드 레이아웃, 갤러리 등 다양한 UI에서 이미지 비율 문제를 해결하는 핵심 도구입니다. 상황에 맞는 값을 선택하면 별도의 이미지 편집 없이도 깔끔한 레이아웃을 구현할 수 있습니다.