◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
<div> <img src="引入图片地址" alt="" class="Img"> </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>
方法：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; }◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。