是否可以使用 CSS calc() 来计算 width/height 比率?

Is it possible to use CSS calc() in order to calculate an width/height ratio?

这是我目前拥有的代码(目前还不能使用):

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。

已知属性:

Ratio: 1280:270

Minimum height: 100px

Maximum height: 270px

Maximum width: 1280px

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

height = calc( CURRENT_SCREEN_WIDTH * 270 / 1280);

但是我目前的做法

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

还没有工作。有CSS解决方案吗?

解决方案(共 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 的解决方案应用于 body 中放置了 div 且 body 的左右填充为 15px 的情况。从计算出的高度中减去总的左右填充 (30px),删除了出现在 div.

上方和下方的 white-space
height:calc(100vw * aspect_ratio - 30px);

没有 calc() 也可以做到这一点。 padding(甚至-top-bottom)都是相对于元素的宽度,所以你可以得到同样的效果:

.chi_display_header {
    background-size: cover;
    width: 100%;
    min-width: 474px;
    max-width: 1280px;
    height: 0;
    padding-bottom: 21.09375%;
}

您还可以使用 relative/absolute 技巧使用内部 <div> 在内部添加元素,但如果内容超过包含高度,事情就会开始出错:

.chi_display_header {
    ...
    position: relative;
}

.chi_display_header .inner {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 15px;
}