我希望我的背景图像拉伸和缩放取决于浏览器视口的大小。
我在Stack Overflow上看到过一些问题，比如拉伸和缩放CSS背景。它工作得很好，但我想使用背景放置图像，而不是使用img标签。
在其中放置了一个img标签，然后用CSS向img标签致敬。
width:100%; height:100%;
它的工作，但这个问题有点老了，并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子，但它不适合我。
是否有一个好的方法来做背景图像声明?
当前回答
您可以将这个类添加到CSS文件中。
.stretch {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
它适用于:
Safari 3或更高版本 Chrome浏览器等等 Internet Explorer 9或更高版本 Opera 10或更高版本(Opera 9.5支持background-size，但不支持关键字) Firefox 3.6或更高版本(Firefox 4支持非供应商前缀版本)
其他回答
您可以使用CSS3属性很好地做到这一点。它会根据比例调整大小，因此不会产生图像失真(尽管它会放大小图像)。请注意，它还没有在所有浏览器中实现。
background-size: 100%;
如果你想让内容水平居中，可以使用这样的组合:
background-repeat: no-repeat;
background-size: cover;
background-position: center;
看起来会很漂亮。
使用我提到的代码…
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%;
}
这就产生了预期的效果:只有内容会滚动，背景不会滚动。
背景图像根据浏览器视口的大小调整为任何屏幕大小。当内容不适合浏览器视口时，用户需要滚动页面，当内容滚动时，背景图像在视口中保持固定。
使用css3，这似乎会容易得多。
您可以使用border-image: yourimage属性将图像缩放到边界。即使你给出了背景图像，边界图像也会被绘制在它上面。
如果你的样式表是在不支持css3的地方实现的，border-image属性是非常有用的。如果你使用谷歌Chrome或Firefox，那么我推荐使用background-size:cover属性本身。
下面的方法对我很有效。
.back-ground {
background-image: url("../assets/background.png");
background-size: 100vw 100vh;
}
这可以在不同的维度上覆盖整个背景
