Skip to content
Simple jQuery powered function to enable responsive images
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
tools
LICENSE
README.md
bower.json
package.json
release-changeset

README.md

Responsive Images JS

Simple jQuery powered function to enable responsive images

Tested with jQuery 2.x, however I don't see why it shouldn't work on earlier versions. Feel free to test and let me know.

Usage

Couldn't be any easy to use (sizes from largest to smallest)

<img 	data-sizes="xl, l, m, s, xs" 
		data-srcset="
				http://placehold.it/500x400&text=xl,
				http://placehold.it/400x300&text=l,
				http://placehold.it/300x200&text=m,
				http://placehold.it/200x150&text=s,
				http://placehold.it/150x100&text=xs
			"
/>

<img 	data-sizes="l, m" 
		data-srcset="
				http://placehold.it/400x300&text=l,
				http://placehold.it/300x200&text=m
			"
/>
  • data-sizes: allows predefined sizes or actual css media queries.
  • data-srcset: comma separated urls that are to be used in the same order as data-sizes

Current predefined sizes:

	xs:"only screen and (max-width : 480px)",
	s:"only screen and (min-width : 481px)",
	m:"only screen and (min-width : 768px)",
	l:"only screen and (min-width : 1280px)",
	xl:"only screen and (min-width : 1921px)"

Demo

Contribution

Feel free to contribute to this project and send me any pull request. Perhaps performance improvements, debate defaults screen sizes or even port a version that doesn't require jQuery!

Licence

MIT

You can’t perform that action at this time.