Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CJ Object Scaler 2.1

A JQuery Plug-In to Scale Objects to Fit or Fill Within Another Object

Project Description

CJ Object Scaler will scale an object to either fit or fill within the boundaries of a destination object. I based this plug-in off another JavaScript project I made awhile back, you can read what it does in the CJ Image: Easily Calculate Image Scaling blog enry. It was a nice little function that would help you calculate the size and offsets to use when scaling an image to fit (or fill) within another element. It didn't actually do any scaling, per say, it merely provided you with the numeric amounts to use. The function introduced two scaling methods, Scale To Fit and Scale To Fill.

Image Example

As always, I've tried to keep things simple. To use the CJ Object Scaler v2.1, you first need to include the script in your page header. Once you do this, you need to have something to scale and something to scale into. Let's assume you have some product images displayed in a grid on a page. It might look something like this:

<ul id="productGrid" class="clearfix">
   <li class="product"><img src="" alt="Jacket" /></li>
   <li class="product"><img src="" alt="Hat" /></li>
   <li class="product"><img src="" alt="Coat" /></li>
   <li class="productLink"><a href="demo1.cfm"><img src="" alt="Bunny Slippers" /></a></li>

The plug-in will try it's best to determine what the object dimensions are. So it's not really necessary to provide this information, but I'm not sure how older browsers handle this with images. It might be good practice to include the width and height on those. Also, the plug-in is going to automatically center the object within the destination object. To do this it will apply an absolute positioning to the it. To work properly, the destination object must have it's positioning set to either relative or absolute. The CJ Object Scaler will try to determine if this is set. If not, it will set the positioning to relative. Here's the CSS for this example:

ul#productGrid {
   display: block;
   width: 100%;
   height: auto;
   margin: 0;
   padding: 0;
   list-style: none;

ul#productGrid li {
   display: block;
   width: 190px;
   height: 150px;
   border: 1px solid #ccc;
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   overflow: hidden;

ul#productGrid li a {
   border: 0;

And here's how you would call the plug-in to begin your scaling:

// the first call sets the first 3 LI's
$("#productGrid li img").each(function() {
     method: "fit",
     fade: 800

// we take in account the link on the 4th LI
$(".productLink img").each(function() {
     destElem: $(this).parent().parent(),
     method: "fill",
     fade: 150

If you notice, I did not need to need to provide a parent object for the first call. The images are going to be scaled based on their parent object, which in this case are the LI's. But for the second call, we have an image placed within a link. In this case, we need to tell the function to scale it based on it's parent LI container. To do this, we just add the destElem variable and pass the parent location as a jQuery object. If you are using selectors to choose your objects, be sure you are passing the objects parent. Since in our example, all the <li>'s are the same size, you could in theory pass the first occurrence of one to the plug-in and everything would still look the same.

You can also specify which scaling method to use. Your options are "fit" and "fill" (fill is the default). Fit will scale the object to fit within the destination element. Fill will enlarge it to fill the destination object.

The last option, fade, determines if you would like to hide your object(s) and then do a fadeIn once the scaling is complete. If you provide a positive integer, this will determine the fadeIn duration in milliseconds. The default value is 0, which does not trigger the effect.


Object Example

CJ Object Scaler isn't limited to just scaling images. It can also be used to scale any object. Not sure what you would use it for, but it will do it just the same. The function will take in account any BORDER width on the source object as well.

<div id="bigObject">
   <div id="smallObject"></div>
jQuery Code
$("#smallObject").each(function() {
      method: "fit",
      fade: 550


As always, if you have any problems, let me know. I've tested this pretty thouroughly in Safari, FireFox and Internet Explorer 8. But if you come across a case where your having problems, be sure to come back and let me know.