Keep the aspect ratio of a div with CSS, with a max-height

Question

Is there any chance to maintain aspect ratio of DIV with max-height option?

There is a solution to keep aspect ratio:

div.stretchy-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

It works perfect but what if want to keep DIV re-sizable but up to certain height? Let's say I want DIV stop re-sizing once it's height reaches 200px. Any ideas? Thank you in avance.

using `@media screen and (min-height: 201px)` and `@media screen and (max-height: 200px)` in css or with JS. — nelek, Feb 17 '16 at 20:46
@nelek the OP is not talking about the screen's height, but rather the element's height. — Sean, Feb 17 '16 at 21:05
@cb4 I noticed in your edit summary for this post that you are "cleaning up the aspect tag". Note that [there is a defined process for this](http://meta.stackoverflow.com/q/324070/215552), and we generally don't want a bunch of edits coming into the suggested edit review queue. — Heretic Monkey, Jul 14 '16 at 18:22
Voting to reopen as this question is not answered by the marked duplicate. It's distinctly different, albeit related. — Sean, May 25 '21 at 17:25

Sean · Answer 1 · 2016-02-17T21:17:16.270

Because you're keeping a constant aspect ratio, just figure out what the width of the element would be at your desired maximum height, and then set the max-width property.

In this case, to stop the div from resizing once it is 200px tall, you'd want to set max-width: 266.666px.

.stretchy-wrapper {
  position: relative;
  width: 100%;
  max-width: 266.666px;
}
.ratio {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  background: gold;
}

<div class='stretchy-wrapper'>
  <div class='ratio'>
  </div>
</div>

Keep the aspect ratio of a div with CSS, with a max-height

1 Answers1