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

【问题标题】：resize both width and height of a div while window resize using css在使用 css 调整窗口大小时调整 div 的宽度和高度
【发布时间】：2014-11-10 22:51:40
【问题描述】：

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

【问题讨论】：

标签： css resize height width

【解决方案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 */
}

【讨论】：