CSS 이미지 object-fit cover

1 개요

CSS 이미지 비율유지, 최대크기로 cover
CSS 이미지 비율유지, 최대크기로 crop
CSS background-size: cover

가로·세로 비율은 유지한 채로 주어진 영역에 여백이 없도록 맞춤(확대·축소)

2 방법 1: 배경그림 커버

<style>
div {
    width: 100px; height: 100px;
    margin: 10px;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png') no-repeat;
}
.box-100-100 {
    background-size: 100% 100%;
}
.box-100 {
    background-size: 100%;
}
.box-contain {
    background-size: contain;
}
.box-cover {
    background-size: cover;
}
</style>

<div class='box-default'></div>
<div class='box-100-100'></div>
<div class='box-100'></div>
<div class='box-contain'></div>
<div class='box-cover'></div>

3 같이 보기