根据高度保持 div 的纵横比 [英] Maintain aspect ratio of a div according to height

问题描述

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

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

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

.wrapper{高度:Y%，位置:相对；}.wrapper:之后{padding-left: Y(x/y)%;显示:块；}

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

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

解决方案

由于 % padding/margin 是根据 contrainer 的宽度来计算的，所以不能使用padding 技术"来根据高度来保持纵横比.

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

<块引用>

vh : 视口高度的 1/100.

来源

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

<小时>

宽高比为 1:1 的示例:

演示

CSS

div{宽度:50vh；高度:50vh；}

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

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

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

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

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

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

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

解决方案

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.

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

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

Source

For browser support see canIuse

---

Example for a 1:1 aspect ratio :

DEMO

CSS

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

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