Resizing Background Photos

jStretcher is a simple lightweight way to make your background images resize and crop to the their parent container, even as their parent changes size.

How Do I Use It?

First, you need some HTML. Add the following somewhere on your site :

<div class="stretcher">
  <img src="/src/to/image.png" width="width" height="height" alt="dont forget this" />
</div>

Style them appropriately :

.stretcher {
  position: absolute; /* For all those stupid browsers */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  botom: 0;
  z-index: 1;
}
.body {
  /* Where the stuff on top goes */
  position: relative;
  z-index: 2
}

Then in your JavaScript somewhere call :

jQuery.stretcher.init();

Gravity!

Let's say you have an image of an apple, and the apple is in the center of the image. In that case, you want the image to stay roughly centered on the page. Don't worry, this'' work great for you out of the box.

What if the apple is in the top left corner though? Well, you might want the image to be anchored in the top left instead of in the center. In this case, you can set the "gravity". To do so, just add the data-gravity attribute to the stretcher div.

<div class="stretcher" data-gravity="0x0">
  ...
</div>

The gravity is formatted {gravity vertical}x{gravity horizontal} where each measurement is between 0 (all the way to the top or left) and 1 (all the way to the bottom or right). With a lopsided photo, it's best to fiddle with this until you get the results you want.

Standalone Usage

This library adds the following methods :

jQuery.stretcher.init(selector) : Setup using default settings. Bind window resize and orientation change events and use the selector to find elements to setup. By default, selector is set to .stretcher.

jQuery(selector).stretcher(options) : Stretch this particular jQuery object. Any image tags inside will be "stretched to fit" this element, and this element will be stretched to fit options.container or window. Gravity is set to options.gravity or this elements data-gravity attribute.

jQuery(selector).sizeToFit(container, options) : Size this element to fit container. Gravity is set to options.gravity. This element can be anything, but is normally an image tag.

Need Something

Want something? Please let me know! You can find me at the gorgon lab