jQuery: Autoscale Element to Parent
Width

Recently I’ve been working on a proposed redesign of my school’s online courseware 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.

Download the Code

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

Creative Commons License
This work is dedicated to the Public Domain.

° Top     # Permalink to this article