이미지와 비율 제어 (object-fit, aspect-ratio)
웹 개발에서 이미지를 다룰 때 가장 큰 골칫거리는 이미지가 찌그러지거나(Distortion), 로딩 전에 레이아웃이 덜컹거리는 현상입니다. 이를 해결하기 위해 모던 CSS는 두 가지 강력한 속성을 제공합니다.
object-fit: cover는 이미지가 주어진 공간을 꽉 채우되, 찌그러지지 않도록 넘치는 부분을 잘라냅니다. aspect-ratio: 16 / 9는 요소의 가로세로 비율을 강제로 고정시켜, 이미지가 로딩되기 전부터 정확한 공간을 확보(Cumulative Layout Shift 방지)하게 해줍니다.
<div class="container">
<div class="card">
<!-- 가로로 긴 이미지를 1:1 박스에 넣는 상황 -->
<img src="https://picsum.photos/600/300" alt="정상 이미지" />
</div>
<div class="card">
<img src="https://picsum.photos/600/300" class="bad-img" style="object-fit: fill;" alt="찌그러진 이미지" />
</div>
</div>