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

我一直在尝试随着宽度的减小增加div的高度。这样可以使所有文本更好地适应并且不会流出。没有js是否有可能实现这一目标？

    width: 100%;
    height: 29vw;

Vw随着宽度的减小而减小高度。(我需要完全相反的行为。宽度减小，高度增大)我尝试使用负的vw来逆转效果，但是没有运气。

谢谢!

最佳答案

做到这一点的主要方法是使用CSS媒体查询(非常流行)。如果您正在寻找一种无需媒体查询的替代方法，那么这里是:

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

例子:

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

jsfiddle DEMO

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