img圖片被壓縮變形解決方案CSS

在作項目的時候常常遇到這樣一個問題，  就是一張圖片寬度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 中的一個相同，取決於它們兩個之間誰獲得的對象尺寸會更小一些。