在背景中拉伸和缩放css图像-仅使用css。

Question

在背景中拉伸和缩放css图像-仅使用css。我希望我的背景图像伸展和缩放取决于浏览器的视口大小。我看到了一些关于堆栈溢出的问题，比如拉伸和缩放CSS背景例如。它工作得很好，但是我想用background，不是用img标签。在那个img标记，然后使用css向img标签。width:100%; height:100%;它工作，但这个问题是有点老，并指出，在CSS 3调整背景图像将工作很好。我试过了第一个例子但对我来说不管用。是否有一个很好的方法来处理background-image申报？

Answer 1

CSS 3有一个很好的小属性，名为background-size:cover.

这样缩放图像，使背景区域被背景图像完全覆盖，同时保持高宽比。整个区域将被覆盖，但是，如果调整大小的图像的宽度/高度太大，则图像的一部分可能是不可见的。

Answer 2

您可以使用CSS 3属性很好地完成它。它的大小与比率，所以没有图像失真(虽然它做高档小图像)。请注意，它尚未在所有浏览器中实现。

background-size: 100%;

Answer 3

使用电码我说过.。

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，这似乎要容易得多。