CSS 객체 위치 속성
CSS object-position속성은 컨테이너 내에서 <img> 또는 <video>를 배치하는 방법을 지정하는 데 사용됩니다.
이미지
400x300 픽셀의 다음 파리 이미지를 보세요.
다음으로 object-fit: cover;종횡비를 유지하고 주어진 치수를 채우는 데 사용합니다. 그러나 이미지는 다음과 같이 잘립니다.
예시
img {
width: 200px;
height:
300px;
object-fit: cover;
}
object-position 속성 사용하기
표시된 이미지의 일부가 원하는 위치에 있지 않다고 가정해 보겠습니다. 이미지의 위치를 지정하기 위해 object-position속성을 사용합니다.
여기에서 object-position속성을 사용하여 크고 오래된 건물이 중앙에 오도록 이미지를 배치합니다.
예시
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
여기에서 object-position속성을 사용하여 유명한 에펠탑이 중앙에 오도록 이미지를 배치합니다.
예시
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
CSS 개체-* 속성
다음 표에는 CSS object-* 속성이 나열되어 있습니다.
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |