是否可以使用 CSS calc() 来计算宽度/高度比？

Question

这是我目前拥有的代码（它还不起作用）：

HTML：

 <div class="chi_display_header" style="background-image:url('http://localhost/.../header-dummy-small.png');"></div>

CSS：

 .chi_display_header {
    background-size:contain;
    width:100%;
    min-height:100px;
    height:calc(1vw * 270 / 1280px);
    max-height:270px;
    max-width:1280px;
    margin:0 auto;
}

这是一个居中的响应式背景图像——容器应该有一个可变的宽度/高度，我不想使用 jQuery。

已知属性：

比例：1280:270

最小高度：100px

最大高度：270px

最大宽度：1280px

我尝试做的是用 calc 神奇地计算 .chi_display_header 的容器高度：

高度 = 计算（CURRENT_SCREEN_WIDTH * 270 / 1280）；

但是我目前的做法

height:calc(1vw * 270 / 1280px);

还不行。有 CSS 解决方案吗？

原文由 Blackbam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决方案（ty 4 条评论）：

 .chi_display_header {
    background-size:cover;
    width:100%;
    min-height:100px;
    height:calc(100vw * 270.0 / 1280.0);
    max-height:270px;
    max-width:1280px;
    margin:0 auto;
}

原文由 Blackbam 发布，翻译遵循 CC BY-SA 3.0 许可协议