Increase height as width decreases(Reverse Vw for height)

Question

i have been trying to increase the height of a div as the width decreases. This allows for all the text to fit in better and not flow out. Is it possible to achieve this without js?

    width: 100%;
    height: 29vw;

Vw decreases the height as the width decreases.(i need the exact opposite behaviour. Width goes down-height goes up) I have tried using a negative vw to reverse the effect with no luck.

Thank you!

Answer 1

The main way to do it is using CSS media queries (wich is very popular). If you're looking for an alternative to do it without media queries, here it is:

vw gets bigger on small screens while calc(Xpx - Xvw) gets smaller on small screens.

Example:

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

jsfiddle DEMO

Alternatively, you could use the other 3 units related to the viewport's size: vh vmin and 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