Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<picture> Element for responsive images.
<!--
SOURCE REFERENCES
See:
* https://www.html5rocks.com/en/tutorials/responsive/picture-element/
* https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/
-->
<style>
.responsive-image {
height: 100%;
object-fit: cover;
width: 100%
}
</style>
<picture class="responsive-image">
<source
media="(min-width: 1600px)"
srcset="img/puppy-1600.jpg,
img/puppy-1600@2x.jpg 2x,
img/puppy-1600@3x.jpg 3x,
img/puppy-1600@3x.jpg 4x,">
<source
media="(min-width: 1200px)"
srcset="img/puppy-1200.jpg,
img/puppy-1200@2x.jpg 2x,
img/puppy-1200@3x.jpg 3x,
img/puppy-1200@3x.jpg 4x,">
<source
media="(min-width: 992px)"
srcset="img/puppy-992.jpg,
img/puppy-992@2x.jpg 2x,
img/puppy-992@3x.jpg 3x,
img/puppy-992@3x.jpg 4x,">
<source
media="(min-width: 768px)"
srcset="img/puppy-768.jpg,
img/puppy-768@2x.jpg 2x,
img/puppy-768@3x.jpg 3x,
img/puppy-768@3x.jpg 4x,">
<source
media="(min-width: 576px)"
srcset="img/puppy-576.jpg,
img/puppy-576@2x.jpg 2x,
img/puppy-576@3x.jpg 3x,
img/puppy-576@3x.jpg 4x,">
<!-- Fallback <img> element (REQUIRED FOR <picture> ELEMENT.) -->
<img src="img/puppy-576.jpg"
srcset="img/puppy-576.jpg 576w,
img/puppy-768.jpg 768w,
img/puppy-992.jpg 992w,
img/puppy-1200.jpg 1200w,
img/puppy-1600.jpg 1600w"
alt="Cute little dog">
</picture>
@JayHoltslander

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.