css – 根据高度保持div的纵横比

前端之家收集整理的这篇文章主要介绍了css – 根据高度保持div的纵横比前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Maintain div aspect ratio according to height4个
我必须保持div的纵横比相对于窗口调整大小的高度.

我可以使用填充底部保持纵横比(x:y)关于宽度(X%);或填充顶部;

所以从类比来看,我尝试使用padding-left;

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

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

但padding-left的百分比值不会给包装器带来任何宽度.

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

解决方法

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

对于CSS解决方案,您将必须使用vh单位:

vh : 1/100th of the height of the viewport.

Source

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

1:1宽高比的示例:

DEMO

CSS

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

猜你在找的CSS相关文章