html - 如何使我的背景图像按宽度而不是高度调整大小？

Question

现在我正在使用这段代码来调整背景图片的大小:

background: url(../website/assets/shadedbackground.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

当浏览器窗口的宽度调整大小时(图像在其两侧被裁剪并稍微变小)，它看起来和工作得很好，但是当高度调整大小时，整个图像被缩小，这把一切都弄乱了。我想要做的是使高度永久化，但仍然让宽度像这段代码目前所做的那样调整大小。

我希望这是有道理的。我对此还是很陌生。谢谢!

Answer 1

您是否尝试过在媒体查询中使用断点？

封面的使用使图像缩放。这就是它的目的。如果浏览器调整大小改变了一些东西，那么你必须修改你的代码。

更多信息见: http://css-tricks.com/perfect-full-page-background-image/

如果您在 jsfiddle 或其他地方发布示例，人们将能够给出更详细的答案。