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

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 중 콘텐츠 크기가 작은 값 선택하여 보여준다.

 

아~ 헷갈려~ @_@)