如何在CSS中制作一个方形<div>，其宽度参考高度[重复]答案

【问题标题】：How to make a square <div> in CSS with a width refering to the height [duplicate]如何在CSS中制作一个方形<div>，其宽度参考高度[重复]
【发布时间】：2015-10-22 08:52:07
【问题描述】：

我需要一个 <div> 和一个以百分比表示的 height 和一个 width，以便它是一个正方形。所以width 必须引用height。

CSS：

#square {
    height: 100%;
    width: "100% of height of this div";
}

HTML：

<div id="square"></div>

我已经看到了带有 padding-top 属性 (example) 的解决方案，但它仅适用于给定的 height。另一种方法是 JavaScript/jQuery 解决方案 like this，但我更喜欢纯 CSS 解决方案。

有没有一种很好的方法（没有空白方块<img> 或其他东西）？也许等于padding-top？我已经尝试过padding-right，但它不起作用。

【问题讨论】：

@TylerH 我的问题不是this 的重复。我的问题是关于width 指的是height 而不是height 指的是width。如果我看对了，那么您链接到的帖子的答案对我的问题不起作用。
该问题有多个答案，其中第二个与这里的两个答案实现相同。
@TyleH 我已经按照您链接到的答案或该问题的答案中所说的那样去做，但它不能完美地工作。如果我有一个与完整屏幕高度相关的height，则很难在另一个具有透视大小的<div> 元素内计算正方形<div> 的正确大小。如果有像我在问题末尾提到的 padding-top 这样的解决方案，那就太好了。

标签： html css

【解决方案1】：

您是否尝试过使用视口宽度？他们有很好的浏览器支持。我还建议使用类而不是 ID，这会降低 CSS 的特异性并使您能够重用样式...

<div class="square"></div>

.square {
    height: 100vh;
    width: 100vh;
}

【讨论】：

【解决方案2】：

这里有：

HTML：

<div class="square">
    <h1>This is a Square</h1>
</div>

CSS：

.square {
    background: #000;
    width: 50vw;
    height: 50vw;
}
.square h1 {
    color: #fff;
}

【讨论】：