CSS object-position 속성

CSS object-position 속성은 <img> 또는 <video>가 그 컨테이너 내의 위치를 지정하는 데 사용됩니다.

이미지

우한에서 온 이 이미지를 보세요, 크기는 600x400 픽셀입니다：

다음은 사용합니다 object-fit: cover; 넓이와 높이 비율을 유지하고 주어진 크기를 채우기 위해.

예제

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

직접 시험해 보세요

object-position 속성

보여지는 이미지 부분이 원하는 위치가 아니라면. 이미지를 정렬하기 위해 사용할 것입니다 object-position 속성.

여기서 우리는 사용할 것입니다 object-position 속성을 사용하여 이미지를 정렬하고, 고대 건물을 중심에 위치시킵니다：

예제

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

직접 시험해 보세요

여기서 우리는 사용할 것입니다 object-position 이미지를 정위치하여 유명한紫禁城角楼을 오른쪽에 배치하는 속성을 사용합니다：

예제

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

직접 시험해 보세요

CSS object-* 속성

아래 표는 CSS object-* 속성을 나열합니다：