I have a fluid container and I want its height to gradually change based on the width of the window (since the with of the div is 100%). Note that the desired behavior is similar to the one when the aspect-ratio css rule is applied, which is a linear gradual increase/decrease. Such variation should stop at a certain min and max height.

I understand that some js might be required, so I am open to it if css alone fails.

CodePudding user response：

You should look into different available units of width in css. Mainly the vh and vw. In the example below you can see a div, with a height of 10% of viewport width, and width of 10% of viewport height.

div {
  width: 10vh;
  height: 10vw;
  background-color: red;
}

<div>Custom div</div>