CSS maintain div aspect ratio given height

2
votes

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?

1
javascriptcsshtml
You tried using calc() in your css? for example: height: calc(width * 1.25) – garryp
try adding position: relative to your div – Alin Mercasi
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
where have you set the width? – Ed Knowles

1 Answers

1
votes

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;
}