[CSS] 이미지를 요소의 크기에 맞게 조절하기 (object-fit)

object-fit 이란

CSS의 'object-fit' 속성은 html 태그 요소 내에 이미지나 비디오를 배치하고 크기를 조절하는 데 사용

 

 

object-fit 속성 값

cover

: 이미지의 비율을 유지하면서 요소를 꽉 채움

 

fill

: 이미지의 비율을 유지하지 않고 요소를 꽉 채움

 

contain

: 이미지의 비율을 유지하면서 내용이 전체적으로 비오도록 함

 

none

: 내용의 크기 조정 없이 그대로 표시

 

scale-down

: 'contain'과 'none' 중에 적절한 것을 선택

 

 

 

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 

 

 

 

ex)

 

 

 

 

+추가로

background를 꽉 채우려면 background-size: cover;