object-fit
👉 속성
object-fit: fill;
태그의 기본 속성값으로, 요소에 크기에 맞게 꽉채워 보여주며 비율은 유지하지 않는다.
object-fit: contain;
비율은 유지하며 영역의 가로 또는 세로 값에 맞게 크기가 조정되며,
가로 또는 세로 길이에 딱 맞추기 때문에 여백이 생길 수 있다.
object-fit: cover;
비율은 유지하며 영역의 가로 또는 세로 값에 맞게 크기가 조정되며, 영역에 맞게 이미지가 잘린다.
가로, 세로를 꽉 채울때까지 확대된다.
object-fit: none;
크기가 조정되지 않고 원본사이즈로 처리된다. 크면 잘리고, 작으면 여백이 보인다.
object-fit: scale-down;
none 또는 contain 중에 더 적절한 방향으로 크기를 조절한다.
👉 예제
▼ object-fit: fill;
▼ object-fit: contain;
▼ object-fit: cover;
▼ object-fit: none;
▼ object-fit: scale-down;
Web Publisher