是否可以使用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的容器高度:

height = calc(CURRENT_SCREEN_WIDTH*270/1280);

但是我目前的方法

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

不起作用.有CSS解决方案吗？

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;
}