CSS 이미지 object-fit cover

개요

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

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

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

방법 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" />

방법 2: 배경그림 커버

<style>
div {
  float: left;
  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>

CSS 이미지 object-fit cover

목차

개요

방법 1: 그림 커버

방법 2: 배경그림 커버

같이 보기