0

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.

IanWing
  • 113
  • 9
  • 1
    Can you please share some code? https://stackoverflow.com/help/how-to-ask – SecretTimes Oct 12 '21 at 13:25
  • Sorry, "I would like to do something, please tell me how" is not a suitable question for Stackoverflow – Jeremy Thille Oct 12 '21 at 13:25
  • 2
    You can define the height of your container using the `vw` [unit](https://developer.mozilla.org/en-US/docs/Web/CSS/length) to have the height change when the width does. Simply pick the ratio you're looking for (0.5vw, 0.75vw, etc...). – D M Oct 12 '21 at 13:25
  • 1
    `vw / vh` are a good way to go with you don't wanna go the media queries way. – Silviu Burcea Oct 12 '21 at 13:28
  • What do you want me to add? An empty div? It's just a simple question. – IanWing Oct 12 '21 at 13:47

1 Answers1

2

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>
Krzysztof Krzeszewski
  • 5,912
  • 2
  • 17
  • 30