CODEWITHSUNDEEP
javascriptcsshtml
Francis Snipe
Francis Snipe

Reputation: 551

CSS maintain div aspect ratio given height

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?

Upvotes: 2

Views: 290

Answers (1)

simpleManderson
simpleManderson

Reputation: 436

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

Upvotes: 1

Related Questions