5

I'd like to have a div maintain it's aspect ratio while also having a max height. I have been able to maintain the aspect ratio in most cases, except when I hit my media query:

@media only screen and (min-width: 59.063em) {
    #wrapper {
        max-width: 59.063em;
    }
}

When I hit the max-width and make the size of my screen smaller (I noticed this when I was in Developer Tools), the height continues to grow and overflows the parent. For example: https://i.stack.imgur.com/rtJLc.png

It can be found here: http://codepen.io/TrevorRice/pen/jEooQG

I tried using 

#wrapper {
    ...
    max-height: 90%;
    ...
}

but this also breaks the aspect ratio.

Any ideas?

user2909019
  • 833
  • 1
  • 10
  • 19

1 Answers1

4

For mobile phones, and other smaller screen sizes I apply this CSS: (I have this automatically set for all images for example).

In this case it'll go to a maximum of its parents width, and height will stay within the same ratio with the height: auto;

max-width: 100%;
height: auto;

In your case you might just need a combination of both max-height & height. This might fix the issue for you!

#wrapper { 
    max-height:90%; /* <-- */
    max-width:100%;
    height:auto;
}
Mark Pieszak - Trilon.io
  • 61,391
  • 14
  • 82
  • 96
  • Smaller screen sizes seem to work fine. Its when the screen width is much larger than the screen height, that the problem occurs. For example: http://i.imgur.com/Zb9iv9E.png – user2909019 Apr 08 '15 at 15:58
  • See https://stackoverflow.com/questions/52375965/how-to-have-a-div-with-fixed-aspect-ratio-and-max-height-pure-css-no-vh-or-vw – Beuun Sep 21 '18 at 15:07