在使用CSS调整窗口大小的同时调整div的宽度和高度的大小 [英] resize both width and height of a div while window resize using css

问题描述

有什么方法可以与使用CSS调整浏览器的大小相关地调整div的宽度和高度吗?我已经实现了宽度调整，但是找不到相关的高度调整.

解决方案

使用视口百分比长度:

5.1.2.视口百分比长度:"vw"，"vh"，"vmin"，"vmax"单位

视口百分比长度相对于初始包含块的大小.更改初始包含块的高度或宽度时，将对其进行相应缩放.

如果您想创建一个保持长宽比的正方形，可以使用:

> 此处的示例

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

大多数现代浏览器都支持这些长度-可在此处找到支持. /p>

---

如果您希望使用具有更多浏览器支持的替代方法，则可以始终使用 padding-top技巧，以保持宽高比.

> 替代示例

.maintain-aspect-ratio {
    position: relative;
    width: 25%;
    background: red;
}
.maintain-aspect-ratio:before {
    content: '';
    display: block;
    padding-top: 100%; /* 1:1 ratio */
}

is there any way to resize both width and height of a div in correlation with the browser resize using css? I have already achieved width resize but can't find how to resize the height in correlation.

解决方案

Use viewport-percentage lengths:

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.

If you wanted to create a square that maintains an aspect ratio, you could use:

Example Here

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

These lengths are supported in most modern browsers - support can be found here.

---

If you want an alternative with more browser support, you could always use the padding-top trick to maintain the aspect ratio.

Alternative Example

.maintain-aspect-ratio {
    position: relative;
    width: 25%;
    background: red;
}
.maintain-aspect-ratio:before {
    content: '';
    display: block;
    padding-top: 100%; /* 1:1 ratio */
}

这篇关于在使用CSS调整窗口大小的同时调整div的宽度和高度的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！