仅使用CSS设置宽度相等的高度

Question

我正在尝试使用左上角的按钮设计一个移动用的wesite，它是设置为父对象的100％高度。 宽度应该与高度相同，但我发现只有JS或JQuery的解决方案。我喜欢这样的东西：

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

Answer 1

解决方案是视口的9％高度与9vh匹配。父亲是视口高度的9％，孩子是父母身高的100％。要成为一个完美的正方形，您可以将宽度设置为9vh。 1vh等于视口高度的100.部分。所以现在你可以将视口缩放到任何大小，并且总是有一个sqare。

Answer 2

    .hamburger{

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

您可以在链接here

上找到详细信息