background-size cover和contain的區別

相同點:圖片都是等比例縮放

不同點:cover是鋪滿整個顯示區域。如果顯示比例和顯示區域的比例相差很大某些部分會不顯示

比如下面這張圖,寬比高大很多,使用cover那麼兩邊的就不會顯示

 background:#ccc url(111.jpg) no-repeat center top; background-size: cover;


顯示結果:

兩邊的去掉很多,如果圖片很小就會放大到沒有空白,其中一邊就會不顯示



contain:正好相反,他是按照某一邊來覆蓋顯示區域的,會有白邊

還是上面那張圖,他按照寬度來適應顯示區域,按照等比例那麼高度就會很矮



背景圖全屏展示方法:http://huilang.me/perfect-full-page-background-image/

發佈了47 篇原創文章 · 獲贊 9 · 訪問量 15萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章