I am trying to get the hang of using srcset for repsonsive images and have this so far..
<img
src="https://dummyimage.com/1500x300/2a9c2a/ffffff"
srcset="https://dummyimage.com/1200x300/2a9c2a/ffffff 1200w,
https://dummyimage.com/992x300/2a9c2a/ffffff 992w,
https://dummyimage.com/768x300/2a9c2a/ffffff 768w,
https://dummyimage.com/576x300/2a9c2a/ffffff 576w"
sizes="(max-width: 1200px) 1200px,
(max-width: 992px) 992px,
(max-width: 768px) 768px,
(max-width: 576px) 576px,
1500px
">
I am expecting it to display the 576px
wide image when my screen is below 576px
, the 768px
one when it is below 768px
and so on
It is just displaying the full size 1500px version at every screen size, where am I going wrong?
CodePudding user response:
I recommend you to use the picture
element if you want to deliver the pictures depending on your viewport
.
<picture>
<source srcset="https://dummyimage.com/1200x300/2a9c2a/ffffff" media="(min-width: 1200px)" />
<source srcset="https://dummyimage.com/992x300/2a9c2a/ffffff" media="(min-width: 992px)" />
<source srcset="https://dummyimage.com/768x300/2a9c2a/ffffff" media="(min-width: 768px)" />
<source srcset="https://dummyimage.com/576x300/2a9c2a/ffffff" media="(min-width: 576px)" />
<img src="https://dummyimage.com/576x300/2a9c2a/ffffff" />
</picture>