css3:background-size

定義：規定背景圖像的尺寸

瀏覽器支持：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+

JavaScript語法：object.style.backgroundSize="60px 80px"

語法：

background-size: <bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

例如：

background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;//有多個圖像
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;

使用<length>|<percentage>時，第一個值是指背景圖像的width，第二個指背景圖像的height，若是隻有一個值，height就爲auto
使用percentage注意：width和height是針對於背景區域，不是背景圖像大小。

cover:背景圖像縮放,保留圖像原有的比例/長寬比,無論背景圖像大於仍是小於背景區域，都會覆蓋背景區域,圖像的寬度或高度等於或超過背景區域,再次,根據背景圖像的比例是否匹配的背景區域,背景圖像的某些部分可能不在背景區域內。


contain:背景圖像縮放,同時保留圖像原有的比例/長寬比,不管是圖像的寬度或高度超過背景區域,以儘量大的覆蓋背景區域。所以,根據背景圖像的比例是否匹配背景區域,可能會有一些背景圖像覆蓋不到背景地區。

參考