将CSS纵横比设置为宽度的倒数？答案

【问题标题】：Set CSS aspect ratio to the inverse of width?将CSS纵横比设置为宽度的倒数？
【发布时间】：2013-04-01 20:05:59
【问题描述】：

我在使用 CSS 布局时遇到了问题 - 关键是我希望一个盒子随着宽度的减小而增加高度。

现在，我开始对元素使用“固定纵横比”技术 - 将高度设置为 0，将填充顶部设置为百分比，例如 50%。内边距值计算为父元素的 width 的 50%（不是您可能猜到的高度），因此您最终得到的是一个具有固定 2:1 纵横比的框，但在其他方面是流动的。

下一步（在我的半生不熟的解决方案中）是修改填充百分比，使其随着宽度的减小而增加（宽度为页面的 100%）。我很确定这不会在直接的 CSS 中发生，并且我很高兴使用一小段 Javascript 在调整窗口大小时更新值。

谁能帮我用公式来调整与宽度成反比的百分比？

其他几点说明：

提前致谢。

【问题讨论】：

【解决方案1】：

也许 jQuery .resize() 函数可能会有所帮助？每当调整元素（或窗口）的大小时，它都会绑定一个函数。

例如，如果您希望元素 #el 的面积始终为 50,000 像素平方

$(window).resize(function() {
    area = 50000;
    width = $('#el').width();
    $('#el').height(Math.ceil(area/width));
    });

如果这就是你要找的东西，请告诉我:)

【讨论】：

宾果游戏 - '恒定区域'是我缺少的东西！谢谢，伙计-我觉得这很简单，但是在盯着它看了很长时间后，我已经无法思考了！
我将尝试在支持的情况下使用 CSS3 的 calc() 实现相同的规则，并使用如您所示的 jquery 后备。我认为我的最终解决方案可能会将该区域导出为视口区域的一部分，以保持响应...