html - 如何在 CSS 中制作一个宽度参照高度的正方形 <div>

<分区>

我需要一个 <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 解决方案。

有没有好的方法(没有空白方 block <img> 或其他东西)？可能等于 padding-top ？我试过了 padding-right已经，但它不起作用。

最佳答案

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

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

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

关于html - 如何在 CSS 中制作一个宽度参照高度的正方形 <div>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31733239/

相关文章：

php - 如果模块位置有模块，如何将类名添加到 body 标签？