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

Posted 2023-03-07

【中文标题】是否可以使用 CSS calc() 来计算宽度/高度比？

【英文标题】：Is it possible to use CSS calc() in order to calculate an width/height ratio?

【发布时间】：2016-08-30 11:34:01

【问题描述】：

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

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 解决方案吗？

【问题讨论】：

相关：***.com/questions/1495407/…

100vw 是全角，不是 1vw

@aziz - 有 calc 的解决方案吗？

@circusdei 对.....也许它似乎几乎可以用这个有一点背景尺寸削减：覆盖它可以削减一点

【参考方案1】：

解决方案（ty 4 cmets）：

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

【参考方案2】：

我将 Blackbam 的解决方案应用于将 div 放置在 body 中并且 body 具有 15px 的左右填充的情况。从计算出的高度中减去总的左右内边距 (30px)，删除了出现在 div 上方和下方的空白。

height:calc(100vw * aspect_ratio - 30px);

【参考方案3】：

没有calc() 也可以做到这一点。 padding（甚至-top和-bottom）是相对于元素的宽度，所以你可以得到相同的效果：

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

您还可以使用相对/绝对技巧在内部添加带有内部 <div> 的元素，但如果内容超过包含高度，事情就会开始出错：

.chi_display_header 
    ...
    position: relative;


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