在使用 css 调整窗口大小时调整 div 的宽度和高度

Posted 2023-03-06

【中文标题】在使用 css 调整窗口大小时调整 div 的宽度和高度

【英文标题】：resize both width and height of a div while window resize using css

【发布时间】：2014-11-10 22:51:40

【问题描述】：

有什么方法可以调整 div 的宽度和高度，这与使用 css 的浏览器调整大小相关？我已经实现了宽度调整，但找不到如何调整高度的相关性。

【参考方案1】：

使用视口百分比长度：

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

如果你想创建一个保持纵横比的正方形，你可以使用：

Example Here

.maintain-aspect-ratio 
    width: 25%;
    height: 25vw;

大多数现代浏览器都支持这些长度 - support can be found here。

---

如果您想要一个支持更多浏览器的替代方案，您可以随时使用padding-top trick 来保持纵横比。

Alternative Example

.maintain-aspect-ratio 
    position: relative;
    width: 25%;
    background: red;

.maintain-aspect-ratio:before 
    content: '';
    display: block;
    padding-top: 100%; /* 1:1 ratio */