仅使用 CSS 设置宽度等于高度

Question

我正在尝试为移动设备设计一个网站，左上角有一个按钮，该按钮设置为父对象的100% 高度。 width 应该与 height 相同，但我只找到了 JS 或 JQuery 的解决方案。 我喜欢有这样的东西：

.hamburger {
    height: 100%;
    width: height;
}

Answer 1

解决方案是，视口的9％的高度与9vh相匹配。 父级为视口高度的9％，子级为视口高度的100％。 要成为一个完美的正方形，请将宽度设置为9vh。 1vh等于视口高度的100。 因此，现在您可以将视口缩放到任意大小，并且始终具有正方形。

Answer 2

    .hamburger{

    width:100vw; /* 100% of the viewport width */
    height: 100vw;
}

您可以在此处找到链接的详细信息