<p class="zw"><code>background-size</code>属性允许我们使用像素<code>px</code>来为背景图像设置一个精确的尺寸,如下所示。</p> <pre class="代码无行号"><code>.item__img { background-size : 200px 310px; }</code></pre> <p class="zw">第一个值定义宽度,第二个定义高度。当没有指定高度时,浏览器会自动保持背景图像的宽高比。下面这些例子,会实现相同的效果。</p> <pre class="代码无行号"><code>.item__img { background-size : 200px 310px; } .item__img { background-size : 200px auto; } .item__img { background-size : 200px; }</code></pre> <p class="zw">如果元素的尺寸发生改变,比如变成<code>240px</code>×<code>350px</code>,我们可以为背景图像设置新的尺寸,让它来缩放或者拉伸为合适的大小。我们甚至可以为背景图像设置和元素大小差别很大的尺寸。下面是三个例子。</p> <p class="图"><img alt="1508.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/150.jpg"></p>