1 개요[ | ]
- CSS 이미지 비율유지, 최대크기로 cover
- CSS 이미지 비율유지, 최대크기로 crop
- CSS background-size: cover
- 가로·세로 비율은 유지한 채로 주어진 영역에 여백이 없도록 맞춤(확대·축소)
- 일반적인 그림은
object-fit: cover;
- 증명사진 스타일은
object-fit: cover;
+object-position:top;
이 적절한 듯
2 방법 1: 그림 커버[ | ]
html
Copy
<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: 배경그림 커버[ | ]
html
Copy
<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>
4 같이 보기[ | ]
편집자 125.136.77.151 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.