根据高度保持div的纵横比[重复]

Question

我必须保持 div 相对于窗口调整高度的纵横比。

我可以使用padding-bottom; 或padding-top; 保持纵横比(x:y) 相对于宽度(X%)。

所以类比，我尝试使用padding-left;

.wrapper{
   height: Y%,
   position: relative;
}

.wrapper:after{
   padding-left: Y(x/y)%;
   display:block;
}

但是padding-left 的百分比值并没有给包装器任何宽度。

如何根据高度保持该 div 的纵横比？

Answer 1

由于 % padding/margin 是根据约束的宽度计算的，所以不能使用“填充技术”来根据高度来保持纵横比。

对于 CSS 解决方案，您必须使用 vh 单位：

vh : 视口高度的 1/100。

Source

浏览器支持见canIuse

---

1:1 纵横比示例：

DEMO

CSS

div{
    width: 50vh;
    height: 50vh;
}