CSS를 이용하여 <img> 나 <video> 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분이다. object-fit 속성은 대체되는 요소의 내용(<img>, <video>, <object>, <svg> 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다. CSS3의 background-size 속성과 매우 유사하다.
| fill | 기본값. 주어진 너비와 높이에 딱 맞도록 사이즈를 조절합니다. 이미지의 가로세로 비율은 유지되지 않아요. |
| contain | 가로세로 비율을 유지한 채로 사이즈가 조절되지만, 이미지와 컨테이너 간의 비율이 맞지 않는 경우엔 자리가 남게 됩니다. |
| cover | 가로세로 비율을 유지한 채로 사이즈가 조절되며, 비율이 맞지 않더라도 이미지를 확대해 컨테이너를 완전히 채웁니다. |
| none | 아무것도 하지 않고 본래의 이미지 사이즈를 유지합니다. 그래도 이미지 가운데가 보여지도록 하는 센스가 있어요. |
| scale-down | none 또는 contain 중에 더 적절한 방향으로 이미지 사이즈를 조절합니다. |
요약 정리
- 특징: 이미지 태그나 비디오 태그에 사용
- 장점: 속성 하나로 설정 가능
- 단점: IE 미지원
출처
CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성
CSS를 이용하여 나 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분입니다. 오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머
webdir.tistory.com
'Development > CSS & SCSS' 카테고리의 다른 글
| [CSS] 미디어쿼리 중단점 (0) | 2021.04.20 |
|---|---|
| [CSS] min-width / max-width (0) | 2021.03.12 |
| [CSS] mobile safari 높이 해결 (0) | 2021.01.26 |
| [CSS] 애니메이션 성능 개선 방법 (0) | 2021.01.14 |
| [CSS] position (0) | 2020.12.28 |