html - 仅在宽度上缩放背景

Question

我希望我的背景在宽度上而不是在高度上缩放。

我现在得到了以下代码。

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

使用此代码，背景图像可以缩放整个事物，但我只希望它缩放宽度。有人有解决方案吗？

问候

Answer 1

而不是cover，您可以尝试这样的事情。

background-size: 100% $IMAGE_HEIGHT;

$IMAGE_HEIGHT您正在使用的背景的高度在哪里。

JSFiddle

Answer 2

您可以尝试使用 background-size 属性并设置/拉伸宽度，或者如果它适用于您的情况，请尝试使用值为 repeat-x 的 background-repeat 属性：

{
    background-size: 100% auto; # width and height, can be %, px or whatever.
}

{
    background-repeat:repeat-x;
}