📌 object-fit
: 요소의 크기에 맞게 <img> 태그와 <video> 태그의 크기를 조정하는 속성
📍속성
contain
- 비율을 유지하면서 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절한다.
- 딱 맞추기 때문에 남는 공간이 발생할 수 있다.
cover
- 비율을 유지하면서 요소 콘텐츠 박스를 가득 채운다.
- 비율이 맞지 않으면 일부가 잘린다.
fill
- 기본값
- 박스 크기에 맞춰 요소 크기를 조절한다.
none
- 크기 조절 ❌
scale-down
- none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택한다.
출처
object-fit - CSS: Cascading Style Sheets | MDN
CSS object-fit 속성은 <img>나 <video> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.
developer.mozilla.org