Question

Is there any Javascript library that could force an HTML node (mostly images and div) to keep their aspect ratio while resized?

This would be particularly useful to resize the height of an element when its width is constrained by the size of the window.

Note: if that can be done in pure CSS, I’m buying it!

Answer 1

You mean like this?

http://jsfiddle.net/DerekL/J2s3C/

Here’s the code:

img{
    width: 100%;
    height: auto;
}

For other elements, it will be a bit more complicate.

Here a second demo: http://jsfiddle.net/DerekL/5BgXk/ :

<div id="wrapper"><div id="content"></div></div>

#wrapper {
    position: relative;
    padding-bottom: 33.33%; /* Set ratio here */
    height: 0;
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: green;    
}