根据高度维持div的长宽比 [英] Maintain aspect ratio of a div according to height

问题描述

我必须根据窗口大小的高度保持div的宽高比。

I have to maintain the aspect ratio of a div with respect to the height on window resize.

我可以保持宽高比使用 padding-bottom; 或 padding-top; 关于宽度（X％ 。

I can maintain the aspect ratio(x:y) with regard to the width(X%) using padding-bottom; or padding-top;.

所以从这个比喻，我尝试使用 padding-left;

So from the analogy, I tried using padding-left;

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

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

但是 padding-left <

But the percentage value of padding-left does not give any width to the wrapper.

如何根据div的高度维持该div的宽高比？

How can I maintain the aspect ratio of that div according to its height?

推荐答案

由于％padding / margin是根据禁忌者的宽度计算的，你不能使用填充技术

As % padding/margin are calculated according to the width of the contrainer, you can't use the "padding technique" to maitain aspect ratio according to the height.

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

For a CSS solution, you will have to use vh units :

vh：视口高度的1/100。

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

源

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

For browser support see canIuse

1：1宽高比的示例：

DEMO

DEMO

CSS

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

这篇关于根据高度维持div的长宽比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！