Responsive Image Resizer

Responsive Image Resizer is a jQuery plugin for responsive image.

Usage

$('img').ResponsiveImageResizer({
	width: '768, 992, 1200'
});

for my-image.png, my-image-1200.png, my-image-992.png, my-image-768.png

You don't need use css for this anymore:

img {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: url(img/my-image.png);
}

@media screen and (max-width: 1200px) {
	img {
		background-image: url(my-image-1200.png);
	}
}

@media screen and (max-width: 992px) {
	img {
		background-image: url(my-image-992.png);
	}
}

@media screen and (max-width: 768px) {
	img {
		background-image: url(my-image-768.png);
	}
}

Demo

Check the example here: http://nickbrit.github.io/ResponsiveImageResizer/