拉伸和缩放CSS背景
有没有办法在CSS中获得背景以伸展或缩放以填充其容器？
对于现代浏览器，您可以使用background-size来完成此操作：
body {
background-image: url(bg.jpg);
background-size: cover;
}
cover意味着将图像垂直或水平拉伸，因此不会平铺/重复。
这适用于Safari 3（或更高版本），Chrome，Opera 10+，Firefox 3.6+和Internet Explorer 9（或更高版本）。
为了与更低版本的Internet Explorer一起工作，请尝试以下CSS：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
使用CSS 3属性background-size ：
#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
自2012年起，这款软件适用于现代浏览器。
尽管使用CSS来缩放图像并不太可能，但是可以通过以下方式实现类似的效果。
使用这个标记：
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
使用以下CSS：
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
你应该完成！
为了将图像缩放为“全面流血”并保持宽高比，您可以改为：
.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }
它工作得非常好！ 但是，如果裁剪了一个维度，它将仅在图像的一侧裁剪，而不是在两侧（和居中）均匀裁剪。 我已经在Firefox，Webkit和Internet Explorer 8中测试过它。
链接地址: http://www.djcxy.com/p/4815.html