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

Question

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

Answer 1

使用视口(viewport)百分比长度:

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

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

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

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