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

【问题标题】：How can I make my background image resize by width but not height?如何使我的背景图像按宽度而不是高度调整大小？
【发布时间】：2013-12-11 03:33:57
【问题描述】：

现在我正在使用此代码来调整背景图片的大小：

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;

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

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

【问题讨论】：

你能做一点jsfiddle 来展示更多关于上下文的信息吗？谢谢:)

标签： html css image

【解决方案1】：

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

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

有关详细信息，请参阅： http://css-tricks.com/perfect-full-page-background-image/

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

【讨论】：