[CSS] 13. Object-fit

Mar 10, 2025

종류	설명	결과
`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;
}

💡

박스 크기에 맞게 이미지 확대/축소

비율을 유지하면서 넘치는 부분 잘림

See more posts

[CSS] 13. Object-fit

✅ img-box (이미지 컨테이너)

✅ img-item (이미지 스타일)

More articles

[CSS] 15. 인블로그 만들기

[CSS] 14. 실습 예제

[CSS] 12. 아이콘 & 스타일 시트

[CSS] 11. Position

✅ `img-box` (이미지 컨테이너)

✅ `img-item` (이미지 스타일)