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();
});
}