background-size的值cover、contain和100%

                                                                            圖1

給一個寬600px，高600px的div添加一張寬480px，高360px的背景圖片。不重複顯示的狀況下，默認顯示爲圖1。

1.background-size: 100% 100%;

　　會將圖片的寬和高，縮放至和div寬高一致的尺寸（非等比），及寬放大600 / 480 = 1.25倍，高放大600 / 360 = 1.667倍。鋪滿整個div顯示。

 

                                                                          圖2

　　　　　　　　　　　　　　

2.background-size: cover;

　　會將圖片進行等比縮放，也是會鋪滿整個div。只不過超出div的部分會被裁剪。cover的原則是必定要將div鋪滿，可是圖片縮放後自身的比例不會變。如今若是要將600x600的div鋪滿，背景圖片的寬須要放大600 / 480 = 1.25倍，高須要放大600 / 360 = 1.667倍。

高放大的比例比寬要大，因此最終會將背景圖片的寬和高都放大1.667倍（按照比例大的縮放），這個時候，背景圖片的寬被放大到了800px，超出了div的600px寬，因此圖片有200px寬的部分被裁減掉了。

　　　　　　　　　　　　圖3

2.background-size: contain;

 　　也會將圖片進行等比縮放，不保證會鋪滿整個div。contain的原則是包含，無論我怎麼縮放，你都要把我整個都包含進去。同理，如今若是要將600x600的div鋪滿，背景圖片的寬須要放大600 / 480 = 1.25倍，高須要放大600 / 360 = 1.667倍。

高放大的比例比寬要大，因此最終會將背景圖片的寬和高都放大1.25（按照比例小的進行縮放）倍，這個時候，背景圖片的寬被放大到了600px，高被放大到了450px，不足div的600px高。最終就會有留白。

　　　　　　　　　　　　　　　　　　        圖4

 

結語：以上都是我我的的理解，若有誤，請隨時幫忙糾正。