Stretchy Pants

“Chancho. When you are a man, sometimes you wear stretchy pants in your room. It's for fun.” - Nacho

Put This on First

jQuery

How to Wear

Put an image in a container with variable width and a fixed height (e.g. width: 100%; height: 500px; ).

Put on your stretchy pants.

 $('.hero-container img').stretchyPants();

As you resize the window the image will stay within the bounds of the container, two of the edges will be cropped out but the image will not be distorted.

See demo.html for a examples.

Options

These are the default options:

{
	container: image.parent(),
	anchor: 'center-center',
	fitVerticals: false,
	autoStretch: true
}

Container

If your variable width container is not the parent of the stretchy image you'll do this:

$('#hero-image').stretchyPants({ container: '.hero-wrap' })

Anchor

By default the plugin will keep the center of the image centered in the container. You can choose to anchor the top or bottom, and left or right sides:

// this will ensure the bottom-left of the image is always in frame
$('.hero-container img').stretchyPants({ anchor: 'bottom-left' })

// this will ensure the top of the image is always in frame
$('.hero-container img').stretchyPants({ anchor: 'top-center' });

These are the valid anchor values:

center-center (default), center-left, center-right,
top-center, top-right, top-left, 
bottom-center, bottom-right, bottom-left

fitVerticals

If you have tall images that you'd rather not stretch you may set this to true.

autoStretch

Sometimes the sizes of other things are being resized with the window and you want to control when stretchyPants will do it's thing - you can pass autoStretch: false and call the stretchImage() function that we've attached to the data object.

$('#main-hero').stretchyPants({ anchor: 'bottom-left', autoStretch: false  });

$('#main-hero').data.stretchImage()
$(window).resize(function(){
	// resize some other stuff...
	/// now we are ready to stretch our image:
  $('#main-hero').data.stretchImage()
})
if(window.addEventListener){
  window.addEventListener('orientationchange', function(){
  	// resize some other stuff...
		/// now we are ready to stretch our image:
    $('#main-hero').data.stretchImage();
  }); 
}

danhixon/stretchy_pants