Question

我有这段代码：

.header {
    background-image: url('https://placeholdit.imgix.net/~text?txtsize=86&txt=1800%C3%97345&w=1800&h=345');
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    margin: 0;
    border-radius: 0 0 0 0;
}

我希望背景图片能够在不提及高度的情况下做出响应（与上面的代码不同）。我尝试将height设置为100%或auto，但它不起作用。

我的问题是如何在不提及它的高度的情况下使背景响应？

Answer 1

根据您的使用方式，您可以使用

max-width: 100%;或width: 100%

Answer 2

你不能真正忽略高度，但你可以解决它。正如@Isaac Madwed所说，你可以定义一个最大宽度，但你也可以使用自动高度。默认情况下，height属性的值为auto，但如果您使用的是预制主题或模板，则此值可能已重置为不同的值。因此，您不仅可以保证图像不会从右侧溢出，还可以保证图像的高度与实际宽度成比例。生成的CSS可以是这样的： .header { background-image：url（＆＃39; https：//placeholdit.imgix.net/~text？txtsize = 86＆amp; txt = 1800％C3％97345＆amp; w = 1800＆amp; h = 345＆＃39;）; 最大宽度：100％; 身高：自动; background-repeat：no-repeat; 背景尺寸：封面; 填充：0; 保证金：0; border-radius：0 0 0 0; } 或者，您可能需要设置最小宽度，以确保图像在您的网站上看起来不错。

Answer 3

您可能正在寻找：

background-size: 100% auto;

请参阅http://jsfiddle.net/o0g3qsev/上的示例。

使用自适应背景图像而不设置它的高度

3 个答案: