Deprecated ALA Responsive Image Snippets
| <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