CSS object-fit으로 이미지 채우기

object-fit

이미지를 특정 영역에 채우려고 할때 사용할 수 있는 속성 중 object-fit이 있습니다. object-fit에는 3가지 값을 넣을 수 있는데, fill, cover, contain이 있습니다.

 

fill, cover, contain

• fill: 세로 길이를 늘려서 특정 영역을 채움. 특정 영역에 맞게 채우다보니 이미지 비율이 달라짐
• cover: 이미지가 잘리더라도, 이미지가 늘어나지 않고 영역을 채움
• cotain: 이미지 비율을 유지하고, 이미지도 잘리지 않고 영역을 채움

 

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

원본 이미지

 

fill / cover / contain