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;
}