Skip to content

Instantly share code, notes, and snippets.

@b4z81

b4z81/picture.html

Last active October 25, 2016 16:53
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 b4z81/9cbce9733f15ce1c9e2c80521b48ab9c to your computer and use it in GitHub Desktop.
Save b4z81/9cbce9733f15ce1c9e2c80521b48ab9c to your computer and use it in GitHub Desktop.
Download ZIP
responsive images
Raw
picture.html
<picture>
<source srcset="extralarge.jpg" media="(min-width: 1000px)">
<source srcset="large.jpg" media="(min-width: 800px)">
<img srcset="medium.jpg" alt="…">
</picture>
Raw
responsive-image.html
<img srcset="
examples/images/image-384.jpg 1x,
examples/images/image-768.jpg 2x
" alt="…">
Raw
responsive-image.scss
.img {
background-image: url(examples/images/image-384.jpg);
}
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.img {
background-image: url(examples/images/image-768.jpg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment