본문 바로가기
웹코딩 배우기/· CSS

object-fit 박스에 콘텐츠를 채우는 방식

by 닐기 2021. 9. 24.

See the Pen object-fill by nilgi (@nilgi) on CodePen.


object-fit: fill; // 기본값. 콘텐츠를 박스에 가득 채운다. 가로세로비가 깨진다.
object-fit: cover; // 가로세로비 유지하여 가득 채운다. 박스와 콘텐츠의 크기가 다르면 이미지가 잘린다.
object-fit: contain; // 박스 크기에 맞게 가로세로비를 유지하여 가득 채운다.
object-fit: none; // 콘텐츠의 크기를 조절하지 않는다. 박스 크기만큼 보여주고 이미지는 잘린다.
object-fit: scale-down; // nono과 contain 중 콘텐츠 크기가 작은 값 선택하여 보여준다.

 

아~ 헷갈려~ @_@)