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

Question

有没有办法调整div的宽度和高度与浏览器调整大小使用css相关联？我已经实现了宽度调整，但无法找到如何在相关性中调整高度。

Answer 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 */
}