居中显示
img 标签
<img width="300" src="xxx.jpg" />
<img class="img1" src="xxx.jpg" />
<img class="img2" src="xxx.jpg" />
.img1 {
width: 180px;
height: 300px;
object-fit: cover;
}
.img2 {
width: 300px;
height: 200px;
object-fit: cover;
}
background-image 属性
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
div {
display: inline-block;
background: url(xxx.jpg) no-repeat;
}
.box1 {
width: 300px;
height: 225px;
background-size: 100% auto;
}
.box2 {
width: 180px;
height: 225px;
background-position: center;
background-size: cover;
}
.box3 {
width: 300px;
height: 200px;
background-position: center;
background-size: cover;
}
铺满显示
background-image: url(xxx.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;