Div Square，宽度尺寸基于100％的高度

Question

我正在尝试根据元素的（100％）高度使用宽度大小制作一个响应式正方形。我相信仅使用CSS是不可能的。

正方形宽度应等于高度（大型容器的100％。大型容器大于屏幕的100％）。该比例必须为width = height才能保持正方形。

Answer 1

好的，这里的解决方案。

<div id="square" style="background-color:black;height:100%">test</div>

$(window).ready(updateWidth);
$(window).resize(updateWidth);

function updateWidth()
{
var square = $('#square');
var size = square.height();

square.css('width',size);
}