background-size:cover; //塞滿(覆蓋)
background-size:contain //包含
兩者均以保持圖像寬高比的形式縮放來適合背景容器的大小
區(qū)別:
在no-repeat的情況下
cover:圖片寬高比不變,鋪滿整個(gè)容器的寬高,圖片多出來的部分會(huì)裁掉
contain:圖片寬高比不變 ,縮放至圖片完全展示出來,所以會(huì)有留白區(qū)域
在repeat情況下
cover:圖片寬高比不變,鋪滿整個(gè)容器的寬高,圖片多出來的部分會(huì)裁掉
contain:容器至少有一張完整的圖,留白區(qū)域則平鋪背景圖,鋪不下的再裁掉