居中显示

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;