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

Question

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

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

图像需要能够按比例缩小(正如目前所做的那样)，但不能为较小的设备设置过大的高度 (475 像素)。 100% 最小和标准高度不起作用，如果可以的话，我想避免为不同的媒体查询指定单独的高度。

有谁知道我怎样才能使它有效响应？

谢谢

Answer 1

你设置了静态高度:475px；如果您想在较小的设备上使用较小的高度，请尝试使用媒体查询:

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

这应该有效。