CSS3 background-size 背景尺寸

指定背景图片的尺寸。
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

语法：

默认值：

auto

继承性：

否

DOM 语法：

object.style.backgroundSize = sBackgroundSize

适用于：

所有元素

浏览器支持：

可能的值：

值

描述

contain

保留原始的纵横比，缩放图片到最大的尺寸，这样，整个图片的宽度和高度都容纳进背景定位区域内。

cover

保留原始的纵横比，缩放图片到最小的尺寸，这样，整个图片的宽度和高度都覆盖在背景定位区域内

[ <length> | <percentage> | auto ]{1,2}

第一个数字代表背景图片的宽度，第二个参数代表背景图片的高度。如果只设置一个参数，第二个参数则被认为是 auto 。auto 值则是根据图片原始的纵横比进行计算。

说明：

例子 1：

<style>
#cavas
{
  height:600px;
  border:1px solid orange; 
  background-image:url("http://dotnet.aspx.cc/Images/logoSite.gif");
  background-size:100% 600px;
}
</style>

<div id="cavas"></div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

例子 2：

<style>
#cavas1
{
  height:200px;
  border:1px solid red; 
  background-image:url("http://dotnet.aspx.cc/Images/logoSite.gif");
  background-size:contain;
}

#cavas2
{
  height:200px;
  border:1px solid red; 
  background-image:url("http://dotnet.aspx.cc/Images/logoSite.gif");
  background-size:cover;
}
</style>

<div id="cavas1"></div>
<div id="cavas2"></div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

CSS3 中文参考手册

background-size 背景尺寸

语法：

可能的值：

说明：

例子 1：

例子 2：