Skip to content

Instantly share code, notes, and snippets.

@ruemic
Last active December 17, 2015 01:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ruemic/5531337 to your computer and use it in GitHub Desktop.
Save ruemic/5531337 to your computer and use it in GitHub Desktop.
Standard oupput for a picture fill markup with four breakpoints,
<div data-picture="" data-alt="Eagle Perch">
<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/150/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg"> </div>
<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/300/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-device-pixel-ratio: 2.0)"> </div>
<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/300/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-width: 768px)"> </div>
<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/600/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-width: 768px) and (min-device-pixel-ratio: 2.0)"> </div>
<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/450/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-width: 1280px)"> </div>
<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/900/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-width: 1280px) and (min-device-pixel-ratio: 2.0)"> </div>
<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/600/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-width: 2000px)"> </div>
<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/1200/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-width: 2000px) and (min-device-pixel-ratio: 2.0)"> </div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img alt="" src="hhttp://c1940652.r52.cf0.rackcdn.com/fit/300/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg"></div>
</noscript>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment