TECH TIP: Implementing auto-resizing billboard images using jQuery

There are many techniques available to style images on the Web–including static images, slideshows, lightboxes, carousels, etc.–so they scale to fit a range of screen resolutions. In the following code-level tutorial, we’re going to share a simple method for implementing a universal display solution that can be used across all browsers and platforms including iPad, iPhone, Android and other mobile devices.

Beware code ahead!

Given this simple HTML code:

The CSS can be used for setting up the document background color and the horizontal alignment of the billboard:

body {
  margin: 0; padding: 0;
  background-color: #000;
  text-align: center;
}

We recommend using an image of at least 2000 pixels in width to ensure image quality but consider your own requirements for your project.

The actual image scaling and vertical centering is performed using the following jQuery-based snippet:

function resize_image() {
  // read the current viewport/window dimensions
  var viewportWidth = $(window).width();
  var viewportHeight = $(window).height();
  // calculate the billboard image ratio
  var ratio = $('img').height() / $('img').width();

  // check the viewport’s orientation
  if (viewportWidth <= viewportHeight) {
    // portrait -- image width is set to the document width 
    var newImageHeight = Math.floor(viewportWidth * ratio);
    $('img').css({
      width: viewportWidth, 
      height: newImageHeight, 
      marginTop: Math.floor((viewportHeight - newImageHeight) / 2)
    });
  } else { 
    // landscape -- image height is set to that of the document 
    $('img').css({
      height: viewportHeight, 
      width: Math.floor(viewportHeight / ratio), 
      marginTop: 0
  });
}

We use the $(window).load() call-back function to have JavaScript run the code after the document is ready and the assets have been downloaded:

$(window).load(function() {
  resize_image(); 
}); 

To further improve the display, we can hide the original image during page load, displaying it only after it is fully loaded and resized. To achieve this, we can set the image's visible property to hidden either directly into the markup or with JavaScript:

$(function() {
  // called on document ready
  $('img').css('visibility', 'hidden'); 
});

$(window).load(function() {
  // called after all assets have been downloaded
  resize_image();
  $('img').css('visibility', 'visible'); 
});

To make our code even more responsive, we can trigger the resizing routine in the window's resize event call-back. This will adjust the image if the browser window is resized after the image is initially rendered:

$(window).on('resize', resize_image);

The expected results should look like this:

Following is the entire code set for this example:

And that sums it up. We hope this technique will help those of you who are trying to write markup for images that responsively resize based on screen size. Best of luck!