在后台拉伸和缩放CSS图像
我希望我的背景图像可以根据浏览器视口大小进行拉伸和缩放。
我已经看到了Stack Overflow的一些问题，比如拉伸和缩放CSS背景。 它运作良好，但我想要使用background放置图像，而不是使用img标记。
在那一个img标签被放置，然后用CSS我们致敬img标签。
width:100%; height:100%;
它的工作原理，但这个问题有点老，并指出在CSS 3调整背景图像将工作得很好。 我已经尝试了第一个例子，但它并没有为我工作。
有没有一种好的方法来处理background-image声明？
CSS3有一个很好的小属性叫做background-size:cover 。
这会缩放图像，使背景区域完全被背景图像覆盖，同时保持宽高比。 整个区域将被覆盖，但如果调整大小的图像的宽度/高度太大，则图像的一部分可能不可见
你可以使用CSS3属性来做得很好。 它调整比例，所以没有图像失真（虽然它确实高档的小图像）。 请注意，它尚未在所有浏览器中实现。
background-size: 100%;
使用我提到的代码...
HTML
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
CSS
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
这产生了预期的效果：只有内容会滚动，而不是背景。
背景图像调整为浏览器视口的任何屏幕大小。 当内容不适合浏览器视口，并且用户需要滚动页面时，背景图像在内容滚动时保持固定在视口中。
用CSS 3看起来会更容易一些。
链接地址: http://www.djcxy.com/p/2563.html