CSS의 object-fit과 object-position 속성은 이미지를 원하는 크기로 자르고(crop) 요소 안에서 어떻게 표시될지 세밀하게 제어할 수 있도록 도와줍니다. 반응형 웹 디자인에서 이미지 비율이 어긋나거나 레이아웃이 깨지는 문제를 해결할 때 특히 유용합니다.
기본 문법
CSS object-fit과 object-position 속성의 기본적인 작성 형식은 다음과 같습니다.
Selector {
object-fit: /*값*/
object-position: /*값*/
}object-fit에 사용할 수 있는 주요 값은 다음과 같습니다.
- cover: 요소를 꽉 채우도록 이미지를 확대·축소하며, 남는 부분은 잘려나갑니다.
- contain: 이미지 전체가 보이도록 요소 안에 맞춥니다. 빈 공간이 생길 수 있습니다.
- fill: 기본값으로, 요소 크기에 맞게 이미지가 늘어나거나 찌그러집니다.
- none: 이미지 크기를 변경하지 않고 원본 그대로 표시합니다.
예제 1: cover와 contain 비교
다음 예제는 CSS object-fit 속성의 동작 방식을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
object-fit: cover;
}
img:last-of-type {
object-fit: contain;
}
</style>
</head>
<body>
cover
<img src="https://images.unsplash.com/photo-1611423837981-2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/>
<img src="https://images.unsplash.com/photo-1611423837981-2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/>
contain
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
첫 번째 이미지는 cover 값으로 인해 요소 영역을 가득 채우며 일부가 잘리고, 두 번째 이미지는 contain 값으로 인해 이미지 전체가 요소 안에 맞춰져 표시됩니다.
예제 2: object-position으로 위치 조정하기
object-fit과 함께 object-position 속성을 사용하면 잘린 이미지의 기준점(초점)을 조절할 수 있습니다.
<!DOCTYPE html>
<html>
<style>
div {
border: 1px solid blue;
width:100%;
height:300px;
}
img {
float:left;
width:50%;
height:100%;
object-fit:cover;
object-position: 20px -10px;
}
</style>
<body>
<div >
<img src="https://images.unsplash.com/photo-1611800065908-233b597db552?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250" />
<img src="https://images.unsplash.com/photo-1612626256634-991e6e977fc1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250"/>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
여기서 object-position: 20px -10px;는 이미지의 표시 기준점을 오른쪽으로 20px, 위쪽으로 10px 이동시켜, cover 상태에서 어떤 부분이 보이게 될지 결정합니다.
브라우저 크기 변경 시 효과
창 크기를 조절하면 object-fit과 object-position이 적용된 이미지가 레이아웃에 맞춰 유연하게 재배치되는 것을 확인할 수 있습니다.
정리
- object-fit: 이미지를 요소에 맞게 채우는(cover), 맞추는(contain) 등 표시 방식을 지정합니다.
- object-position: cover처럼 이미지가 잘릴 때 어느 부분을 중심으로 보여줄지 좌표 또는 키워드(top, center, bottom 등)로 지정합니다.
- 두 속성을 함께 활용하면 별도의 이미지 편집 없이 CSS만으로 다양한 화면 크기에 대응하는 깔끔한 이미지 레이아웃을 구현할 수 있습니다.