相同點:圖片都是等比例縮放
不同點:cover是鋪滿整個顯示區域。如果顯示比例和顯示區域的比例相差很大某些部分會不顯示
比如下面這張圖,寬比高大很多,使用cover那麼兩邊的就不會顯示
background:#ccc url(111.jpg) no-repeat center top; background-size: cover;
顯示結果:
兩邊的去掉很多,如果圖片很小就會放大到沒有空白,其中一邊就會不顯示
contain:正好相反,他是按照某一邊來覆蓋顯示區域的,會有白邊
還是上面那張圖,他按照寬度來適應顯示區域,按照等比例那麼高度就會很矮
背景圖全屏展示方法:http://huilang.me/perfect-full-page-background-image/