Question

我在使用CSS布局时遇到了麻烦 - 关键部分是我想要一个随着宽度减小而增加高度的盒子。

现在，我开始使用元素上的'固定宽高比'技术 - 您将高度设置为0，将填充顶部设置为百分比，比如说50％。填充值计算为父元素的 width 的50％（而不是高度，正如您可能猜到的那样），因此您最终得到的是具有固定的2：1宽高比的框，但在其他方面是流动的。

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

任何人都可以帮助我使用公式来调整该百分比与宽度成反比吗？

其他几点说明：

提前致谢。

Answer 1

也许jQuery .resize（）函数可能有帮助吗？它会在调整元素（或窗口）的大小时将函数绑定。

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

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

如果您正在寻找，请告诉我们。）