Scale a div to fit in window but preserve aspect ratio

Question

How can I scale a div to fit inside the browser view port but preserve the aspect ratio of the div. How can I do this using CSS and/or JQuery?

Thanks!

Answer 1

This is possible with JQuery and a bit of maths.

Use JQuery to get the view ports width and height as well as the divs current dimensions.

$(document).width();

Calculate the divs current aspect ratio. eg width/height

You need a bit of logic to determine whether to set the width or height first, then use the initial ratio to calculate the other side.