使用css3屬性object-fit，參考部落格css3 object-fit屬性
假設乙個img為寬200px，高150px，不對img屬性做任何處理，會被拉伸，如下圖所示
為了不讓被拉伸，可以居中顯示在固定的寬高內（200px 150px），通常解決辦法是寫在乙個div內，為div設定以下屬性
background: url('***') center center no-repeat;
background-size: 100%;
width: 200px
height: 150px
object-fit: cover
object-fit還有其他屬性值，具體用法參考文件
長寬相等的
.cover
}
寬高自適應
網頁布局中經常要定義元素的寬和高。但是很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是自適應 元素自適應在網頁布局中非常重要，他能夠使網頁顯示更加靈活，可以適應在不同裝置 不同視窗和不同解析度下顯示 1.寬度自適應 元素寬度設定為100 塊元素寬度預設為100 2.元素具備最小高度的自...
寬高自適應
寬高自適應 靈活 網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是pc自適應。自適應的優點 元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同裝置 不同視窗和不同解析度下顯示。一 相對視窗和父元素的自適應寫法 寬度 width 1...
寬高自適應
寬高自適應可以使得網頁更加靈活，適應在不同的裝置不同解析度下。一 pc端寬高自適應 相對視窗或者父元素的自適應情況 寬度自適應 width 100 預設情況下，不新增定位時 寬度自適應的比例，是參照父元素的寬度進行顯示的，也就是說，如果元素的父元素是整個頁面的話，顯示的時候就是鋪滿整個螢幕 如果當父...