2

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

现在，我从元素的“固定纵横比”技术开始——将高度设置为 0，将顶部填充设置为百分比，例如 50%。内边距值计算为父元素宽度的 50%（不是您可能猜到的高度），因此您最终得到的是一个具有固定 2:1 纵横比的框，否则大小是可变的.

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

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

其他一些注意事项：

  • 该元素是一个“间隔” - 它是不可见的，所以如果它需要两个元素等，那没关系。
  • 整个布局从 2500+ 像素宽到 320 像素宽都是流畅和响应的，所以我们没有可以使用的“最大值”（我不认为）。

提前致谢。

4

1 回答 1

2

也许 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/

让我知道这是否是你要找的:)

于 2013-04-10T06:43:09.363 回答