How to realize that with a decrease in the width of the block, the height also decreases proportionally?

.cont{ max-width: 700px; border: 1px black solid; height: 400px; } 
  <div class="cont"> </div>

1 answer 1

 .cont { max-width: 700px; border: 1px black solid; } .cont div { height: 0; padding-top: calc(400 / 700 * 100%) } 
 <div class="cont"> <div></div> </div>

  • 2
    Why is an embedded div? why padding-top ? where are the numbers 400 and 700? It would be great if you explained all this and indicated that this is so-called. CSS gateway - Sasha Omelchenko