背景大小图像CSS的响应高度

Question

我有一个具有以下属性的响应式背景图像

    background: url( '@{sitePath}/main_banner.png') center no-repeat;
    max-width: 100%;
    z-index: -10;
    height: 475px;
    background-size: contain;

图像需要能够缩小（就像当前一样），但对于较小的设备没有很大的高度（475px）。 100％分钟＆amp;标准高度不起作用，我想避免为不同的媒体查询指定单独的高度，如果我可以帮助它。

有谁知道如何才能有效地做出响应？

由于

Answer 1

你已经把静态高度：475px;如果您想在较小的设备上使用较小的高度，请尝试使用媒体查询：

@media (max-width: size-that-you-want){
    .class-name{
        width: some-number;
    }
}

这应该有用。