HTML CSS怎么解决网页图片变形的办法

1.背景图片方式

这种方法是利用css背景图方式，让图片垂直水平居中显示，不会拉伸变形。

.box {
   width: 400px;
   height: 400px;
   background: url("img") no-repeat center center;
   background-size: cover;
}

2.CSS3的object-fit属性

object-fit有五个值
fill — 默认，不保证保持原有的比例，根据宽高拉伸或者压缩填满。
contain — 保持原有尺寸比例，内容被缩放，上下或者左右有留白。
cover — 保持原有尺寸比例，但部分内容可能被裁切
none — 保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down — 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，上下或者左右有留白，取决于它们两个之间谁得到的对象尺寸会更小一些。

<img class="img" src="img" alt="">
 
.img{
   width: 400px;
   height: 400px;
   object-fit: cover;
}