Srcset attribute - max-width issue

Question

I have following markup in html `

<picture>
   <source 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" 
         media="(max-width: 2560px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1920.jpg" 
         media="(max-width: 1920px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1600.jpg" 
         media="(max-width: 1600px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1336.jpg" 
         media="(max-width: 1366px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1200.jpg" 
         media="(max-width: 1200px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_991.jpg" 
         media="(max-width: 991px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_767.jpg" 
         media="(max-width: 767px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_480.jpg" 
         media="(max-width: 480px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_360.jpg" 
         media="(max-width: 360px)">
   <img 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" alt="">
</picture>

`

Images are not showing if media is set to max-width, but working when set to min-width.

Any advice?

@MarcosPérezGude thanks, that works. How to apply min-device-pixel-ratio inside media? I mean i have 2 sets of images for retina and for normal screens. Still i have added below another set of sources with media condition. — Pavlito
– Pavlito, Commented May 3, 2017 at 10:31
You can add mediaqueries inside media attribute . I will add an answer — Marcos Pérez Gude
– Marcos Pérez Gude, Commented May 3, 2017 at 11:42
The browsers use the first condition they finds true, unlike regular css would do. — Luca Reghellin
– Luca Reghellin, Commented Aug 18, 2017 at 10:54

Marcos Pérez Gude · Accepted Answer · 2017-05-03 11:45:10Z

If you reverse the sources order it will work because it applies in the correct order. So your final code:

<picture>
   <source 
         srcset="img/home-page/placeholders/placeholder_360.jpg" 
         media="(max-width: 360px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_480.jpg" 
         media="(max-width: 480px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_767.jpg" 
         media="(max-width: 767px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_991.jpg" 
         media="(max-width: 991px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1200.jpg" 
         media="(max-width: 1200px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1336.jpg" 
         media="(max-width: 1366px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1600.jpg" 
         media="(max-width: 1600px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1920.jpg" 
         media="(max-width: 1920px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" 
         media="(max-width: 2560px)">
   <img 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" alt="">
</picture>

If you want to apply another media, like min-device-pixel-ratio as your comment request, you can add it no problem:

   <source 
         srcset="img/home-page/placeholders/placeholder_2560-3.jpg" 
         media="(max-width: 2560px) and (min-device-pixel-ratio: 3)">

or

   <source 
         srcset="img/home-page/placeholders/placeholder_2560-3.jpg" 
         media="(min-device-pixel-ratio: 3)">

Reverse order is working! Combining 2 rules with px ratio 1 and px ratio 2 is little problematic. What order is for that?

Collectives™ on Stack Overflow

Srcset attribute - max-width issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related