CSS 이미지 object-fit cover

1 개요

CSS 이미지 비율유지, 최대크기로 cover

CSS 이미지 비율유지, 최대크기로 crop

CSS background-size: cover

• 가로·세로 비율은 유지한 채로 주어진 영역에 여백이 없도록 맞춤(확대·축소)
• 일반적인 그림은 object-fit: cover;

증명사진 스타일은 object-fit: cover; + object-position:top;이 적절한 듯

2 방법 1: 그림 커버

<style>
.image0 {
    width: 100px; height: 100px;
    object-fit: cover;
}
.image1 {
    width: 100px; height: 100px;
    object-fit: cover;
    object-position: top;
}
.image2 {
    width: 100px; height: 100px;
    object-fit: cover;
    object-position: bottom;
}
</style>

<img class='image0' src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png" />
<img class='image1' src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png" />
<img class='image2' src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png" />

3 방법 2: 배경그림 커버

<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>

4 같이 보기

• 크로핑(cropping)
• CSS 원형 사진
• CSS 증명사진 자르기
• CSS 그림 파일 일부만 보여주기
• CSS 이미지 크기 비율에 맞게 줄이기
• CSS object-fit 속성
• CSS object-position 속성
• CSS background-size 속성