object-fit 콘텐츠 크기 표시 방식 지정

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

 

.im1 {
  width: 270px;
  height: 160px;
  object-fit: fill; / 기본값. 콘텐츠를 박스에 가득 채움. 가로세로비가 깨짐.
}

.im2 {
  width: 270px;
  height: 160px;
  object-fit: cover; / 가로세로비 유지하여 가득 체움. 박스와 콘텐츠의 크기가 다르면 이미지가 잘림.
}

.im3 {
  width: 270px;
  height: 160px;
  object-fit: contain; / 박스 크기에 맞게 가로세로비를 유지하여 가득 채움.
}

.im4 {
  width: 270px;
  height: 160px;
  object-fit: none; / 콘텐츠의 크기를 조절하지 않음. 박스 크기만큼 보여주고 이미지 잘림.
}

.im5 {
  width: 270px;
  height: 160px;
  object-fit: scale-down; / nono과 contain 중에 콘텐츠 크기가 작은 값 선택.
}