jQuery

【jQuery】レスポンシブイメージプラグインResponsive Image Resizer

June 25, 2017
Responsive Image Resizer

Responsive Image Resizerはレスポンシブイメージ用のjQueryプラグイン。

Usage

$('img').ResponsiveImageResizer({
	width: '768, 992, 1200'
});
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);
	}
}

MIT