[HTML] div 안의 이미지 비율 유지하며 꽉 채우는 법 (object-fit 활용)

---

💡 div 영역 안에 이미지를 꽉 채우면서 비율은 유지하고 싶다면?

웹 페이지를 만들 때 이미지를 div 안에 채우고 싶은데,
이미지 비율(가로 세로 비율)은 그대로 유지하면서, 박스는 깔끔하게 꽉 채우고 싶을 때가 많아요.
이럴 때는 CSS의 object-fit 속성을 사용하면 간단하게 해결할 수 있습니다.

---

🛠️ 이미지 비율 유지하며 div 안에 꽉 채우기: 코드 예제와 설명

✅ 기본 예제 (object-fit: cover)

<style>
  .image-box {
    width: 300px;
    height: 200px;
    border: 2px solid #333;
    overflow: hidden; /* 넘치는 부분 잘라내기 */
  }

  .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 유지하면서 꽉 채우기 */
  }
</style>

<div class="image-box">
  <img src="example.jpg" alt="예시 이미지">
</div>

---

🎯 포인트 설명

• object-fit: cover; 👉 이미지 비율 유지 + 박스를 꽉 채움 (잘리는 부분 생김)
• width: 100%; height: 100%; 👉 div 영역에 맞춰 이미지 크기 조정
• overflow: hidden; 👉 넘치는 이미지를 잘라서 깔끔하게 맞춤

---

⚡ object-fit 속성 다른 옵션들

값	설명
fill	비율 무시하고 영역에 꽉 채움 (이미지 찌그러질 수 있음)
contain	비율 유지, 영역 안에 맞춤 (빈 공간 생길 수 있음)
cover	비율 유지, 영역 꽉 채움 (잘릴 수 있음)
none	원본 크기 그대로
scale-down	원본 크기와 contain 중 더 작은 쪽 선택

---

🧩 참고: 배경 이미지(background-image)와의 차이

• background-size: cover; 👉 배경 이미지 채울 때 사용
• object-fit: cover; 👉 <img> 태그에 직접 적용

✔️ 배경 이미지가 아니라 <img> 태그에 쓰는 속성이라는 점이 핵심!

---

🏁 마무리 요약

목표	해결 방법
이미지 비율 유지하며 꽉 채우기	object-fit: cover; 사용
영역에 맞추되 빈 공간 없이 깔끔하게	overflow: hidden; + width: 100%; height: 100%;
배경 이미지 설정과 구분	<img> → object-fit, div 배경 → background-size

---

👉 다음 글 예고

[HTML] 버튼 클릭 시 다른 페이지로 이동하는 법 (a 태그 vs window.location)
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊