CSS maintain div aspect ratio given height

Question

I've found many responses that answer this question given a width. For example: Maintain the aspect ratio of a div with CSS

But if I need to set

div{
  position: absolute
  bottom: 10px;
  top: 10px;
  padding-right: 125%;
}

those solutions do not work.

How can I maintain the div's aspect ratio when I have the height set as above?

You tried using calc() in your css? for example: height: calc(width * 1.25) — garryp, Apr 27 '15 at 18:17
Try setting height and width relative to the `vh` units (1/100th of viewport height) like this: `width: 40vh; height: 30vh;`. I am assuming that it's the height of the viewable area that you're concerned with, not the entire height of a web page. — Always Learning, Apr 27 '15 at 18:24

score 1 · Accepted Answer · answered Apr 27 '15 at 19:46

Here's a solution using viewport units. Depending on your audience, this may or may not be the best solution. See http://caniuse.com/#feat=viewport-units for details. Also, depending on the aspect ratio you want, it will go off the screen in some cases. My next suggestion would bring JavaScript into the mix.

Here's a fiddle you can try out: http://jsfiddle.net/Lq7v2gcq/

And the important code:

#vhtest {
    position: relative;
    top: 5vh;
    height: 90vh;
    width: 50vh;
    margin: 0 auto;
    border: 1px solid red;
}

CSS maintain div aspect ratio given height

1 Answers1

Linked