如何使HTML元素的宽高比为1：1？

Question

我的网站使用百分比，因此可以支持多种屏幕分辨率。

让我们说你的screenresolution是：1920x1080（1080p全高清）

我设置了元素的宽度（让我们说15％），但由于某些原因我无法设置高度（不是问题）。

如何制作div并根据计算出的高度（以像素为单位）设置高度。

换句话说，宽度变为1920 * 0.15 = 288px宽度。如何自动制作高度288px？

Answer 1

明智地使用padding：

#someElement {
    width: 15%;
    height: 0;  // this line is important! otwerwise height + padding > width
    padding-bottom: 15%;  
}

DEMO HERE

这是1：1，但你可以选择任何你想要的比例。

Answer 2

您需要使用jQuery。一个例子：

$('#element').height($('#element').innerwidth());

应将元素的高度设置为innerWidth（不包括边框和边距）。

Answer 3

如果您要为锚标记设置尺寸，则必须为其添加display:block;或display:inline-block;

如果您希望任何元素达到100％高度，则必须将其设置为position:absolute;。