CSS object-fit으로 이미지 채우기
FE/WEB2024. 9. 16. 09:46CSS object-fit으로 이미지 채우기

object-fit이미지를 특정 영역에 채우려고 할때 사용할 수 있는 속성 중 object-fit이 있습니다. object-fit에는 3가지 값을 넣을 수 있는데, fill, cover, contain이 있습니다. fill, cover, containfill: 세로 길이를 늘려서 특정 영역을 채움. 특정 영역에 맞게 채우다보니 이미지 비율이 달라짐cover: 이미지가 잘리더라도, 이미지가 늘어나지 않고 영역을 채움cotain: 이미지 비율을 유지하고, 이미지도 잘리지 않고 영역을 채움 See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

반응형
image