當UI出好圖時，圖片的格式都是有一定比例。但是你不知道的是從后臺拉取的圖片到底是什么比例的。
如果給圖片寫死寬高的話，就會出現(xiàn)圖片變形的問題。這個時候產(chǎn)品就會找你說話了。。。

目前的處理有兩種方式
１，通過背景圖的方式處理。通過background-size作用在容器上

<div class="img_background"></div>
.img_background{
      width: 300px;
      height: 200px;
      border: 1px solid red;
      background-image: url('2.jpeg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
}

2，對圖片使用使用object-fit:cover(推薦使用)

<div class="img_fit">
    <img src="2.jpeg"/>
</div>
.img_fit{
      width: 300px;
      height: 200px;
      border: 1px solid red;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

object-fit,具體有5個值：

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

每個屬性值的具體含義如下（自己理解的白話文，官方釋義見官網(wǎng)）：

• fill: 中文釋義“填充”。默認值。替換內(nèi)容拉伸填滿整個content box, 不保證保持原有的比例。
• contain: 中文釋義“包含”。保持原有尺寸比例。保證替換內(nèi)容尺寸一定可以在容器里面放得下。因此，此參數(shù)可能會在容器內(nèi)留下空白。
• cover: 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內(nèi)容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一致。因此，此參數(shù)可能會讓替換內(nèi)容（如圖片）部分區(qū)域不可見。
• none: 中文釋義“無”。保持原有尺寸比例。同時保持替換內(nèi)容原始尺寸大小。
• scale-down: 中文釋義“降低”。就好像依次設置了none或contain, 最終呈現(xiàn)的是尺寸比較小的那個。

兩種方式實現(xiàn)和效果和原理其實是一樣的。都是通過縮放比例，覆蓋整個尺寸之后。居中顯示。
因為若想圖片不變形的，肯定是需要縮放的。

效果圖.png