如何使用CSS创建一个正方形<div>，其宽度参考高度

Question

我可以帮你翻译成中文。这段内容是关于编程的，需要一个百分比高度和宽度相等的

元素。所以宽度必须与高度相关联。请保留HTML标记。以下是CSS代码：

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

HTML：

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

我看到了一种使用 padding-top 属性的解决方案（示例），但它只适用于给定的 height。另一种方法是 JavaScript/jQuery 解决方案 像这样, 但我更喜欢仅使用 CSS 的解决方案。

有没有一种好的方式来实现这个（不需要一个空白的正方形 <img> 或其他东西）？也许与 padding-top 相等？我已经尝试过 padding-right 了，但它不起作用。

- THWBM

---

@TylerH 我的问题不是与这个重复。我的问题是关于width指向height而不是height指向width。如果我理解正确，你链接的帖子的答案对我的问题无效。 - THWBM

有多个答案可以回答这个问题，其中第二个答案与这里的两个答案实现相同。 - TylerH

@TyleH 我已经尝试按照你提供的答案或者这个问题的其他答案来做，但是它并不能完美地工作。如果我有一个与整个屏幕高度相关的 height，那么很难计算另一个 <div> 元素内百分比大小的正方形 <div> 的正确大小。如果有像我在问题结尾提到的 padding-top 这样的解决方案就太好了。 - THWBM

Answer 1

你尝试使用视口宽度了吗？它们在浏览器上得到了很好的支持。我还建议使用类而不是ID，这可以减少CSS的特异性并使您能够重复使用样式...

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

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

- steffcarrington

Answer 2

Here you have:

HTML:

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

CSS:

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

- arodriguezdonaire