jQuery

【jQuery】画像をレスポンシブに対応させるシンプルなプラグインResponsive Images JS

December 30, 2017
Responsive Images JS

Responsive Images JSは画像をレスポンシブに対応させるシンプルなプラグイン

Usage

<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
			"
/>

定義済みのサイズ

	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)"

MIT