根据高度保持div的纵横比[重复]

Posted 2023-03-06

【中文标题】根据高度保持div的纵横比[重复]

【英文标题】：Maintain aspect ratio of a div according to height [duplicate]

【发布时间】：2014-07-10 10:43:57

【问题描述】：

我必须保持 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 的纵横比？

【问题讨论】：

简而言之，您想要一个响应式 div 块保持高度和宽度的纵横比？

是的，但与高度有关。

【参考方案1】：

由于 % padding/margin 是根据约束的宽度计算的，所以不能使用“填充技术”来根据高度来保持纵横比。

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

vh : 视口高度的 1/100。

Source

浏览器支持见canIuse

---

1:1 纵横比示例：

DEMO

CSS

div
    width: 50vh;
    height: 50vh;

【讨论】：

不幸的是，这是相对于整个窗口的。我希望有一个相对于容器的解决方案......