将CSS宽高比设置为宽度的倒数? [英] Set CSS aspect ratio to the inverse of width?

问题描述

我在CSS布局上遇到麻烦-关键部分是我希望盒子的高度随着宽度的减小而增加.

I'm having trouble with a CSS layout - the key part is that I'd like a box to grow in height as its width decreases.

现在，我开始在元素上使用固定长宽比"技术-将高度设置为0，将填充顶部设置为百分比，例如50％.填充值被计算为父元素的 width 的50％(而不是您可能猜到的高度)，因此最终得到的是一个长宽比固定为2:1的盒子，但大小可变.

Now, I've started with the 'fixed aspect ratio' technique on an element - where you set the height to 0, and the padding-top to a percentage, say 50%. The padding value is calculated as 50% of the width of the parent element (not the height, as you might guess), so what you end up with is a box with a fixed 2:1 aspect ratio, but otherwise is fluid in size.

下一步(在我半生不熟的解决方案中)是修改填充百分比，以使其随着宽度的减小而增加(宽度为页面的100％).我很确定在纯CSS中不会发生这种情况，并且我对一小段Javascript可以在调整窗口大小时更新值感到满意.

The next step (in my half-baked solution) is to modify the padding percentage so it increases as the width decreases (the width is 100% of the page). I'm pretty sure this can't happen in straight CSS, and I'm happy with a small piece of Javascript to update the value when the window is resized.

有人可以帮我提供公式来将该百分比反向调整为宽度吗?

Can anyone help me with the formula to adjust that percentage inversely to the width?

其他一些注意事项:

• 该元素是一个'spacer'-它是不可见的，因此，如果它包含两个元素，等等，就可以了.
• 整个布局是流畅的，并且响应速度从2500+ px减小到320px，因此没有可用的最大值"(我不认为).

谢谢.

推荐答案

也许jQuery .resize()函数可能有帮助?每当元素(或窗口)调整大小时，它将绑定一个函数.

Perhaps the jQuery .resize() function might be of assistance? it binds a function to whenever the element (or window) is resized.

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

For example, if you wanted the area of an element #el to always be 50,000 pixels-squared

$(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/

jQuery .resize() Documentation: http://api.jquery.com/resize/

让我知道这是否是您想要的:)

Let me know if this is what you were looking for :)

这篇关于将CSS宽高比设置为宽度的倒数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！