DaveJays Blog

Horizontally and Vertically Center and Resize an Image with jQuery

JUN 16th 2008 • 2 Comments

I recently had the opportunity to develop an image scaling technique that vertically and horizontally centers and scales an image depending on the browser window size. The result is an image that fills the whole of the page no matter what position or size the browser should happen to be in. Here is an example of the resizing result that we're shooting for.

What's the Big Deal?

To illustrate what this technique does, let's compare it to a regular image resizing technique. The most common method is to set the width of the image to 100% and leave the height value out, essentially allowing the height to be resized automatically as the width changes. The result is an image that is anchored from the top left and resized from there. The problem is that the focus of the photo may be inadvertently cut off if the photo is in the wrong position (as seen below).

Using this technique, the photo remains vertically and horizontally centered as the browser window dimensions change, this allows for the focus of the photo to remain in the viewing area much more easily.

If it's short and wide or tall and narrow, the subject of the photo remains in the frame.

How It's Made

There's a couple of jQuery plugins that are require to make this work. First, the Center Element plugin to center the picture both horizontally and vertically. The second is the Dimensions plugin that will provide us with real time values for the width and height of the browser window.

In order for this effect to work with the following script, The image must have a 3x2 aspect ratio. If another aspect ratio is used, some simple modifications to the script would have to be made.

The next step is to write a function to resize the image. It's a pretty basic script. All we have to do is set the width of the image to that of the window and set the height to 67% of the width (maintaining the 3x2 aspect ratio).

Then, if the height of the image starts to get smaller than that of the window, that's bad because we would see the background of the page. So if that happens we switch procedures and start setting the height of the image to that of the window and the width to 150% of that (again, to maintain the 3x2 aspect ratio).

Once that's said and done, we just center the image vertically and horizontally. Then call the function when the page loads and on the resize event.

<script type="text/javascript">
//<!--
function resize(){
  $("#image img")
    .width($(window).width())
    .height($(window).width() * .67);

  if($("#image img").height() <= $(window).height()){
    $("#image img")
      .height($(window).height())
      .width($(window).height() * 1.5);
  }

  $("#image img").center();
}

$(document).ready(function(){ resize(); });
$(window).resize(function(){ resize(); });

//-->
</script>


The Html and CSS

The markup for this effect is pretty straightforward, simply place the image you'll be resizing in a container such as a div. Then set the container to position: fixed, and the width and height to 100% of the window. You can view the final effect and get a better idea of all the specific code required.

#image {
   width: 100%;
   height: 100%;
}

Practical Use

I think there are many uses where this technique could come in handy, I'm already dreaming up a few ideas of how I can use this. One basic effect is to use the image as a background for a page. Since it's position is static, content can easily flow right over it. View a sample here. However, I feel it's worthy to note that the increasingly popular iPhone does not recognize elements using position fixed. So you may want to take that into consideration when using this technique.

posted in: Design | Development |