第一种结构：图片是子元素

<code><div>

<img src="引入图片地址" alt="" class="Img">code>

</div>

方法一：img元素添加 object-fit:cover

div{

width: 500px;

height: 500px;

}

.Img{

width: 100%;

height: 100%;

object-fit:cover;

}

方法二：img元素垂直居中，最小宽高都设置为满屏

div{

width: 500px;

height: 500px;

position:relative;

overflow:hidden;

}

.Img{

position: absolute;

top: 50%;

left: 50%;

display: block;

min-width: 100%;

min-height: 100%;

transform:translate(-50%,-50%);

}

第二种结构：图片是背景图片

<div class="container"></div>code>

方法：div元素添加 background-size: cover;设置图片为不重复no-repeat

.container{

height: 500px;

width: 500px;

margin: 0px auto;

background: url('../Status/img/health.png') no-repeat;

background-size: cover;

}