CSS object-fit 속성
- 이전 페이지 CSS 이미지 스타일
- 다음 페이지 CSS object-position
CSS object-fit 속성은 <img> 또는 <video>의 크기를 컨테이너에 맞게 조정하는 방법을 정의합니다.
브라우저 지원
표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
| 속성 | 크롬 | IE | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS object-fit 속성
CSS object-fit 속성은 <img> 또는 <video>의 크기를 컨테이너에 맞게 조정하는 방법을 지정합니다.
이 속성은 내용이 컨테이너에 어떻게 채워지는지 정의합니다. 예를 들어, '비율 유지' 또는 '가능한 한 많은 공간을 차지하고 확장'입니다.
다음은 상하이 플라워 포트에서 가져온 튤립 이미지입니다. 그 크기는 300x300 픽셀입니다：
하지만, 위의 이미지를 200x300 픽셀로 설정하면 이렇게 보입니다：
예제
img {
width: 200px;
height: 300px;
}
그럼 이미지가 200x300 픽셀의 컨테이너에 맞게 압축되고 원래 비율이 파괴됩니다.
만약 사용하면 object-fit: cover;그럼 이렇게 이미지의 양쪽을 잘라서 비율을 유지하고 공간을 채우고 있습니다：
예제
img {
width: 200px;
height: 400px;
object-fit: cover;
}
다른 예제
여기서, 두 장의 이미지가 있으며, 이를 통해 브라우저 창 너비의 50％와 높이의 100％를 채우고 싶습니다.
다음 예제에서는 사용하지 않습니다 object-fit따라서, 브라우저 창 크기를 조정할 때 이미지의 비율이 파괴됩니다：
예제
다음 예제에서는 사용합니다 object-fit: cover;따라서, 브라우저 창 크기를 조정할 때 이미지의 비율을 유지합니다：
예제
CSS object-fit 속성의 모든 값
object-fit 속성은 다음과 같은 값을 받을 수 있습니다：
fill- 기본 값. 대체된 내용 크기를 조정하여 요소의 컨텐트 상자를 채웁니다. 필요하다면 이 객체에 맞게 물체를 확장하거나 압축합니다.contain- 대체된 내용을 비율을 유지하도록 확대하여 요소의 컨텐트 상자에 넣습니다.cover- 내용 요소 전체 컨텐트 상자에서 비율을 유지하도록 내용을 크기 조정합니다. 이 객체는 맞춤을 위해 잘려집니다.none- 대체 내용 크기를 조정하지 않습니다.scale-down- 내용 크기를 조정하지 않습니다. (더 작은 실제 객체 크기를 유발할 수 있습니다)
아래의 예제는 다음을 보여줍니다 object-fit 속성의 모든 가능한 값:
예제
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- 이전 페이지 CSS 이미지 스타일
- 다음 페이지 CSS object-position
