根据高度保持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

由于％填充/边距是根据对角线的宽度计算的，因此不能使用“填充技术”根据高度来保持纵横比。

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

  

vh：视口高度的1/100。

Source

有关浏览器支持，请参阅canIuse

---

宽高比为1：1的示例：

<强> DEMO

CSS

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