CODEWITHSUNDEEP
htmlcsspicturefillfluid-imagespicture-element
Luca Reghellin
Luca Reghellin

Reputation: 8101

html picture element not honoring small media query

I've got a thing like this:

<picture>
  <source media="(min-width:1200)" srcset="big.jpg">
  <source media="(min-width:840)" srcset="small.jpg">
  <img srcset="big.jpg" alt="Test" />
</picture>

I'm also using picturefill.

My issue is that both firefox and chrome (the 2 I'm currently testing on), will load only big.jpg, even in small screens. Checked also on console's network trace.

My css sets img as basic fluid:

img{
  display: block;
  max-width: 100%;
  height:auto;
}

So what's wrong in my code?

Upvotes: 0

Views: 1153

Answers (1)

Luca Reghellin
Luca Reghellin

Reputation: 8101

As for I haz kode's comment, the answer is: my code lacked unit declaration in media queries.

As for completeness, I also write here a better code for my use case: having a default image for small screens and different one from 840px up.

<picture>
  <source media="(min-width:840px)" srcset="big.jpg">
  <img srcset="small.jpg" alt="Foradori">
</picture>

This will work correctly and download only the right image for the current breakpoint. Also remember we need picturefill to ensure crossbrowser support.

Upvotes: 0

Related Questions