在css中使宽度与高度成比例

Question

我有以下jsfiddle，其一侧的文本可以是任意长度，另一侧有一个框。因为文字可以是任意长度，所以.container的高度是未知的。

如果高度始终是 .container 的 100%，我正在尝试弄清楚如何使 .box-container 始终为正方形。

我知道padding-bottom:100% 技巧，但前提是您知道宽度，而高度无关紧要。我不知道宽度（我也不关心它是什么），但我知道高度将是容器的 100%。我只需要以某种方式将宽度调整为始终为框高度的宽度，然后调整 .text-container 使其不重叠。

简而言之：我需要 .box-container 到 ALWAYS 是一个平方比例，但 ALWAYS 需要 100% 的高度为 .container

我希望这是有道理的。任何指导将不胜感激。

HTML

<div class="container">

    <div class="text-container">
        <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
    </div>

    <div class="box-container">

    </div>

</div>

CSS

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.container { border-radius:3px;box-shadow: 0px 4px 8px rgba(130, 130, 130, 0.25);position:relative; }

.text-container { overflow:hidden;padding:25px;width:70% }

.box-container { position:absolute;right:0;top:0;width:30%;height:100%;background-color:#F9F9F9;padding:20px;}

Answer 1

你不能只用 css 做到这一点！使用这个 jQuery 代码：

var boxContainerH = $('.box-container').height();
$('.box-container').width(boxContainerH);

https://jsfiddle.net/4eob6fty/51/