Skip to content

Instantly share code, notes, and snippets.

@AllThingsSmitty

AllThingsSmitty/picture-element.htm

Last active August 29, 2015 13:56
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 AllThingsSmitty/9278895 to your computer and use it in GitHub Desktop.
Save AllThingsSmitty/9278895 to your computer and use it in GitHub Desktop.
Download ZIP
An example of how to implement the <picture> element
Raw
picture-element.htm
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Picture Element</title>
<style>
@media all {
#pictureElement {
background-image: image-set(small-1.jpg 1x, small-2.jpg 2x);
}
}
@media all and (min-width: 45em){
#pictureElement{
background-image: image-set(large-1.jpg 1x, large-2.jpg 2x);
}
}
@media all and (min-width: 18em){
#pictureElement{
background-image: image-set(med-1.jpg 1x, med-2.jpg 2x);
}
}
</style>
</head>
<body>
<picture id="pictureElement">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<!-- assume media all -->
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<!-- the following are ignored -->
<source media=" is the message " srcset="">
</picture>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment