이미지를 컨테이너 안에서 정렬하는 3가지 방법<img>나 <video> 같은 오브젝트의 사이즈를 컨테이너의 크기에 맞춰 조절 object-fit:cover를 쓰면 가로세로 비율은 유지하면서 컨테이너에 꽉 차도록 설정된다배경이미지에서 쓰는 background-size: cover와 같다 [CSS] 이미지 사이즈 맞추기 (object-fit, absolute, background)컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있습니다. 사용자가 이미지를 등록하는 경우 또는 마케팅 팀이 아무 이미지나 넣는 경우 이미지가 무너지지 않게 조절할 필요가 있죠. 이번에 object-fit 이란 속성을 알게 되면서, 이미지를 컨테이너 안에서 정렬하는 3가지 방법을 정리해봤습니다 🙋♀️ 나 같은 오브젝트의 사이즈를 컨테이너의 크기에 맞춰조절할 수 있어요.https://nykim.work/86?category=692675
![[CSS] 이미지 사이즈 맞추기 (object-fit, absolute, background)](https://www.notion.so/image/https%3A%2F%2Fnykim.work%2Ffavicon.ico?table=block&id=7fbad678-b348-4b7b-930d-acb27b40febe&cache=v2)
![[CSS] 이미지 사이즈 맞추기 (object-fit, absolute, background)](https://www.notion.so/image/https%3A%2F%2Fimg1.daumcdn.net%2Fthumb%2FR800x0%2F%3Fscode%3Dmtistory2%26fname%3Dhttps%253A%252F%252Fblog.kakaocdn.net%252Fdn%252F05jk8%252FbtqFNhPwZ8D%252FKSyAaHOZKrXHsq56K731e1%252Fimg.png?table=block&id=7fbad678-b348-4b7b-930d-acb27b40febe&cache=v2)