Resize height with width

Question

I want that the div start with 350px for height and then u can resize it close to 0px due to width.

<div id="banner"> </div>

in css

#banner{width: 100%; height: calc(width * 0.23874488403);}

you already did but your question is acutally unclear. it's like you need min-height and not max-height — Temani Afif, Apr 09 '20 at 23:50

score 0 · Answer 1 · answered Apr 10 '20 at 00:18

You can achieve this by giving the #banner a width: 99vw, and then using calc to create a height proportional to it. I used a variable here so that it can be set in :root and not repeated inside #banner. Then set the max-height: 350px:

html,body{margin:0}

:root{
    --width: 99vw;
}

#banner{
    width: var(--width); 
    max-height: 350px;
    height: calc(var(--width) * 0.24);
    box-sizing: border-box;
    border:solid 2px dodgerblue;
}

<div id="banner"> </div>

Resize height with width

1 Answers1