javascript - 在具有动态内容的 div 上保持纵横比

Question

我正在寻找一种解决方案，其中我的 div 会根据内容动态增长，同时保持 1:1 的纵横比。我发现了许多解决方案，其中框的大小是相对于页面宽度而不是它的内容（像这样）。IE8 兼容性将是一大优势！JavaScript 解决方案也可以，但我更喜欢 CSS 解决方案。

非常感谢！

Answer 1

您可以使用以下函数将元素设置为 1x1 比率：

function set_1x1_ratio(el){
    //set auto size
    el.width('');
    el.height('');

    var max = Math.max(el.width(), el.height());
    el.width(max);
    el.height(max);
}

并在您进行动态添加时调用它。像这样。

或者，您可以使用突变观察者在元素更改时调用它。像这样。

Answer 2

因此，您的问题的答案是/是：

我有一个根据内容动态增长的 div

对（包含）DIV 元素使用“浮动”（缩小以适应）或“显示：内联块”。

同时保持 1:1 的纵横比

为此，您可以在“虚拟”元素上使用 'padding-top' 或 'padding-bottom' 的百分比值表示所需的纵横比（在 1:1 的情况下为 100%），这将是包含 DIV 的子级。然后第二个孩子将被绝对定位（记住要相对定位包含的 DIV）。

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

如果高度实际上高于宽度设置的高度，则还需要

overflow: auto;
max-height: 100%;

为您的元素。

就是这样 -演示