jQuery: Autoscale Element to Parent Width

Recently I’ve been working on a proposed redesign of my school’s online course interface; one of the requirements for my prototype was to create a fairly scalable, fluid interface that will work in any browser. This isn’t difficult in and of itself, but it made another goal of mine somewhat complicated: to make embedded video look good and scale well.

Having already decided to use jQuery, the single greatest tool in my web development arsenal (second only to PHP itself, hehe), I did some searching to try and find some existing code that could scale my videos and images proportionally. I found a couple chunks of code, but neither of them were exactly what I needed, and one was completely busted.

So, I decided to combine a bit of what I’d saw and whip together my own take on it.

Download the JavaScript, include it in your head after your jQuery inclusion, and then call it as so:

$(document).ready(function(){
autoscale(new Array('object', '#featured-image"));
});

The above will scale all your objects (such as embedded video) and an element identified as featured-image to the width of their parent containers, will maintaining a proper aspect ratio proportional to it’s original width and height. You can see an example of it in action with the Vimeo video embedded here; the video starts at 400×225 and is dynamically scaled up to fit the size of it’s parent element.

Download the Code

Let me know if you encounter any problems or have any questions.

This work is dedicated to the Public Domain.