CSS object-position 속성이란?
object-position 속성은 이미지나 비디오 같은 대체 요소(replaced element)가 자신의 콘텐츠 박스 안에서 어떤 위치에 배치될지를 지정하는 CSS 속성입니다. 주로 object-fit 속성과 함께 사용되며, 이미지의 일부분만 보여주거나 특정 지점을 중심으로 표시하고 싶을 때 유용합니다.
기본값은 50% 50%로, 요소가 박스의 중앙에 위치합니다. X축과 Y축 좌표를 픽셀(px), 퍼센트(%), 또는 left·center·right·top·bottom 같은 키워드로 지정할 수 있습니다.
사용 예제
아래 예제에서는 200×200 크기의 박스 안에 원본 이미지를 object-fit: none;으로 표시하고, object-position: 10px 20%;를 적용해 이미지의 위치를 조정하는 모습을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
width: 200px;
height: 200px;
object-fit: none;
object-position: 10px 20%;
border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<img class="demo" src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="400" height="250">
<h2>Memcached Tutorial</h2>
<img src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="300" height="250">
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 이미지는 노란색 점선 테두리가 있는 200×200 박스 안에서 왼쪽에서 10px, 위쪽에서 20% 떨어진 위치에 배치됩니다. 반면 두 번째 이미지는 object-position 속성 없이 기본 상태로 표시되어 두 결과를 비교해 볼 수 있습니다.
주요 속성값 정리
- left / center / right: X축 위치를 키워드로 지정
- top / bottom: Y축 위치를 키워드로 지정
- 픽셀(px): 박스의 왼쪽 위 모서리를 기준으로 정확한 거리 지정
- 퍼센트(%): 박스 크기를 기준으로 상대적인 위치 지정
object-position 속성을 활용하면 반응형 웹 디자인에서 이미지가 잘리는 영역을 세밀하게 제어할 수 있어, 썸네일이나 프로필 사진처럼 고정된 크기의 프레임에 이미지를 넣을 때 특히 유용합니다.