🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An ultra-light, cross-browser jQuery responsive image plugin that dynamically swaps the image source to load the proper image depending on the current screen size.

responsive-image

Documentation

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/


You May Also Like