How to keep element ratio without JavaScript

Question

I am trying to adapt the dimensions of some items on my HTML page to the size of the window. I know it can be done quite easily with JQuery with something like :

 $(window).resize(function(){
     var width = $(this).width();
     $(item).css('height',(height * w / h)+ 'px'); // w and h are variables used to calculate the ratio
 });

However I am looking for a way to do it with CSS. I have an centered item that occupies 40% of the width of the window. So when the width of the window is reduced, the width of the item is reduced too, but the height is the same. So all I want is the ratio to be the same.

Possible duplicate: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window — Thought Space Designs, Sep 25 '13 at 00:41

score 0 · Answer 1 · answered Sep 25 '13 at 00:41

You can set the height to 0, and then add a padding-bottom: X% where X is the image's aspect ratio. You can get the ratio with SASS by using

.element{ padding-bottom: percentage(height/width); }

Also, this can be used in conjunction with a background image and using background-size:cover; to make the image responsive.

How to keep element ratio without JavaScript

1 Answers1