css - 在 Firefox 中将高度调整为容器宽度的 100%

Question

我正在尝试获得一个边长等于容器宽度的方形 div。感谢这个论坛，我通过向我的 div 添加伪元素实现了这一点:

.helper::before {
    content:'';
    padding-top:100%;
    float:left;
}

它适用于 chrome 但不适用于 firefox。我没主意了。

Answer 1

这在 Firefox 中有效，伪元素需要宽度。我添加了背景颜色和高度/宽度，这样您就可以看到它在 helper 上工作。

.helper::before {
 content:'';
 padding-top: 100%;
 width: 5px;
 background: blue;
 float:left;
}

.helper{
 background: red;
 height: 50px;
 width: 50px;
}

https://codepen.io/BenKingstown/pen/mXrbZK