Skip to content

Instantly share code, notes, and snippets.

@maylogger

maylogger/picturefill.haml

Last active December 12, 2015 05:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maylogger/4720696 to your computer and use it in GitHub Desktop.
Save maylogger/4720696 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
picturefill.haml
.pf{ "data-alt" => "", "data-picture" => "" }
%div{ "data-src" => fakeimg(300) }
%div{ "data-src" => fakeimg(300, :retina => 1), "data-media" => "(min-device-pixel-ratio: 1.5)" }
%div{ "data-src" => fakeimg(600 ), "data-media" => "(min-width: 320px)" }
%div{ "data-src" => fakeimg(600, :retina => 1), "data-media" => "(min-width: 320px) and (min-device-pixel-ratio: 1.5)" }
%div{ "data-src" => fakeimg(1200), "data-media" => "(min-width: 768px)" }
%div{ "data-src" => fakeimg(1200, :retina => 1), "data-media" => "(min-width: 768px) and (min-device-pixel-ratio: 1.5)" }
%div{ "data-src" => fakeimg(2400), "data-media" => "(min-width: 1024px)" }
%div{ "data-src" => fakeimg(2400, :retina => 1), "data-media" => "(min-width: 1024px) and (min-device-pixel-ratio: 1.5)" }
%noscript= image_tag fakeimg(300), :alt => ""
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment