html - 宽度减小时增加高度(高度反转 Vw)

Question

我一直在尝试随着宽度的减小而增加 div 的高度。这允许所有文本更好地适应而不是流出。不用js可以实现吗？

    width: 100%;
    height: 29vw;

Vw 随着宽度的减小而降低高度。(我需要完全相反的行为。宽度下降 - 高度上升)我曾尝试使用负 vw 来逆转效果但没有运气。

谢谢!

Answer 1

实现它的主要方法是使用 CSS 媒体查询(非常流行)。如果您正在寻找无需媒体查询的替代方案，这里是:

vw 在小屏幕上变大，而 calc(Xpx - Xvw) 在小屏幕上变小。

例子:

div {
  width: 40vw;
  height: calc(400px - 20vw);
  background: tomato;
}

jsfiddle DEMO

或者，您可以使用与视口(viewport)大小相关的其他 3 个单位:vh vmin 和 vmax。

vw - Relative to 1% of the width of the viewport*;
vh - Relative to 1% of the height of the viewport*;
vmin - Relative to 1% of viewport's* smaller dimension;
vmax - Relative to 1% of viewport's* larger dimension;

*viewport = the browser window size.

Source: w3schools