![[CSS] 13. Object-fit](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-10T08%3A59%3A21.200Z-a4622541-cee9-44ed-8cdf-0d8064b9d98c&w=3840&q=75)
종류 | 설명 | 결과 |
cover | 비율 유지, 넘치는 부분 자름 | ✅ 꽉 차게 맞춤 (권장) |
contain | 비율 유지, 빈 공간 남음 | ⬜ 여백 발생 |
fill | 박스에 맞게 왜곡 | ❌ 비율 깨짐 |
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
}
.img-box {
margin-bottom: 5px;
padding: 10px;
width: 300px;
height: 300px;
border: 1px solid black;
}
.img-item {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="img-box">
<img src="lion.png" class="img-item">
</div>
<div class="img-box">
<img src="lion.png" class="img-item">
</div>
</body>
</html>
속성 | 역할 | 설명 |
box-sizing: border-box; | 요소 크기 계산 방식 | width, height에 padding과 border 포함 |
width: 300px; height: 300px; | 박스 크기 설정 | 고정 크기의 정사각형 박스 |
object-fit: cover; | 이미지 크기 조정 방식 | 비율 유지하며 박스 크기에 맞게 채움 |
✅ img-box (이미지 컨테이너)
.img-box {
margin-bottom: 5px;
padding: 10px;
width: 300px;
height: 300px;
border: 1px solid black;
}- 300x300 크기의 박스
- 테두리(border)와 내부 여백(padding) 포함
✅ img-item (이미지 스타일)
.img-item {
width: 100%;
height: 100%;
object-fit: cover;
}- 박스 크기에 맞게 이미지 확대/축소
- 비율을 유지하면서 넘치는 부분 잘림
Share article