Responsive images - img w

Back to the index.

Responsive images-w.



Alt text


Image width is currently , layout viewport width is , and the image source is .



DPR is .






Saf/iOS 8 bug: first image always used



Multiple media queries



This is the way to use several media queries in one size. Note that there are no brackets around the entire media query system, just around the individual ones. Also, this does not work in Safari: it expects a single media query, apparently.



sizes="(max-width: 713px) 320px,
	(min-width: 713px) and (max-width: 873px) 480px,
	(min-width: 873px) and (max-width: 1033px) 640px,
	(min-width: 1033px) and (max-width: 1193px) 800px,
	960px"