根据高度保持div的纵横比

Question

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

使用:(Y X)相对于宽度(X%)我也能保持高宽比padding-bottom;或padding-top;.

所以从类比来看,我尝试过使用 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。

来源

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

1:1 纵横比示例：

演示版

CSS

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