在背景中拉伸和缩放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&nbsp;id="background"> &nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="img.jpg"&nbsp;class="stretch"&nbsp;alt=""&nbsp;/></div>CSS#background&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;fixed;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;-1;&nbsp;/*&nbsp;Ensure&nbsp;div&nbsp;tag&nbsp;stays&nbsp;behind&nbsp;content;&nbsp;-999&nbsp;might&nbsp;work,&nbsp;too.&nbsp;*/}.stretch&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:100%; &nbsp;&nbsp;&nbsp;&nbsp;height:100%;}这会产生预期的效果：只有内容才会滚动，而不是背景。对于任何屏幕大小，背景图像调整到浏览器视图端口。当内容不适合浏览器视图时，用户需要滚动页面，则在内容滚动时，背景图像仍然固定在视图端口中。使用CSS 3，这似乎要容易得多。