Question

我正在寻找一种解决方案，我可以根据内容动态增长div，同时保持1：1的宽高比。我找到了许多解决方案，其中框的大小相对于页面宽度而不是其内容（如this）。 IE8的兼容性将是一个很大的优势！ JavaScript解决方案也可以，但我更喜欢CSS解决方案。

非常感谢！

Answer 1

所以问题的答案是：

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

使用＆＃39; float＆＃39; （缩小到适合）或＆＃39;显示：内联块＆＃39;对于（包含）DIV元素。

同时保持1：1的宽高比

要实现这一目标，您可以使用＆＃39; padding-top＆＃39;或者＆＃39; padding-bottom＆＃39;一个百分比值表示一个假人的百分比值（在1：1的情况下，它将是100％）。元素，它将是包含DIV的子元素。然后第二个孩子将被绝对定位（记住相对位置包含DIV）。

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

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

overflow: auto;
max-height: 100%;

为你的元素。

那是 - DEMO

Answer 2

您可以使用以下函数将元素设置为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);
}

每当动态添加发生时都会调用它。与this一样。

或者你could use一个变异观察者在元素改变时调用它。与this一样。

使用动态内容维护div的宽高比

2 个答案: