在做項目的時候經常遇到這樣一個問題， 就是一張圖片寬度100% 在縮放屏幕的時候圖片會被壓縮變形！！！如下：
在大屏幕上：
在小屏幕上：
小屏幕上壓縮變形，很丑陋，給人一種很不專業的感覺的。
解決辦法：
為了避免變形，我們可以使用css中object-fit屬性
html:
<div class="swiper-slide">
<img src="images/background@3x.png" alt="">
</div>
<div class="swiper-slide">
<img src="images/IMG_3393.JPG" alt="">
</div>
<div class="swiper-slide">
<img src="images/99.jpg" alt="">
</div>
css:
.swiper-slide { width: 100%; height: 500px;
} .swiper-slide img{ width: 100%; height: 100%; object-fit:cover;
}
object-fit屬性詳解
語法
object-fit 屬性由下列的值中的單獨一個關鍵字來指定。
取值
contain
被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加‘黑邊’
cover
被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果對象的寬高比與內容框不相匹配，該對象將被剪裁以適應內容框。
fill
被替換的內容正好填充元素的內容框。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配，那么該對象將被拉伸以適應內容框。
none
被替換的內容將保持其原有的尺寸。
scale-down
內容的尺寸與 none 或 contain 中的一個相同，取決於它們兩個之間誰得到的對象尺寸會更小一些。