Skip to content

Instantly share code, notes, and snippets.

@murtaugh

murtaugh/deprecated-snippets.html

Last active August 29, 2015 14:25
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 murtaugh/f30f0ac92571bb60b374 to your computer and use it in GitHub Desktop.
Save murtaugh/f30f0ac92571bb60b374 to your computer and use it in GitHub Desktop.
Download ZIP
Deprecated ALA Responsive Image Snippets
Raw
deprecated-snippets.html
<figure data-picture data-alt="">
<div data-src="<!-- URL for standard image here -->"></div>
<div data-src="<!-- URL for high-DPI image here -->" data-media="(min-device-pixel-ratio: 2.0)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="<!-- URL for standard image here -->" alt=""></noscript>
</figure>
<figure data-picture data-alt="">
<div data-src="<!-- URL for small-screen image here -->" data-media="(max-width: 700px)"></div>
<div data-src="<!-- URL for small-screen, high-DPI image here -->" data-media="(max-width: 700px) and (min-device-pixel-ratio: 2.0)"></div>
<div data-src="<!-- URL for standard image here -->" data-media="(min-width: 701px)"></div>
<div data-src="<!-- URL for high-DPI image here -->" data-media="(min-width: 701px) 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 src="<!-- URL for standard image here -->" alt=""></noscript>
</figure>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment