1. 首页
  2. 问题
  3. Div Square，宽度尺寸基于100％的高度
小编典典

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

css

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

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


阅读 385

收藏
2020-05-16

共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);
}
2020-05-16