将CSS宽高比设置为宽度的倒数？
我在使用CSS布局时遇到了麻烦 – 关键部分是我想要一个随着宽度减小而增加高度的盒子。
现在，我开始使用元素上的“固定宽高比”技术 – 您将高度设置为0，将填充顶部设置为百分比，例如50％。 填充值计算为父元素宽度的50％（而不是高度，正如您可能猜到的那样），因此您最终得到的是一个具有固定的2：1宽高比的框，但其他方面的尺寸不大。
下一步（在我的半生不熟的解决方案中）是修改填充百分比，使其随着宽度减小而增加（宽度为页面的100％）。 我很确定这不会发生在直接的CSS中，我很高兴在调整窗口大小时使用一小段Javascript更新值。
任何人都可以帮助我使用公式来调整该百分比与宽度成反比？
其他几点说明：
- 元素是一个’spacer’ – 它将是不可见的，所以如果它需要两个元素，那就没关系。
- 整个布局流畅，从2500 + px宽到320px响应，因此我们无法使用“最大值”（我不认为）。
提前致谢。
也许jQuery .resize（）函数可能有帮助吗？ 它会在调整元素（或窗口）大小时将函数绑定。
例如，如果您希望元素#el的面积始终为50,000像素平方
$(window).resize(function() { area = 50000; width = $('#el').width(); $('#el').height(Math.ceil(area/width)); });
工作示例： http ： //jsfiddle.net/asifrc/T8HrW/embedded/result/
示例代码： http ： //jsfiddle.net/asifrc/T8HrW/
jQuery .resize（）文档： http ： //api.jquery.com/resize/
如果这是您正在寻找的，请告诉我:)