CODEWITHSUNDEEP
picturefillsrcset
resting
resting

Reputation: 17467

Need help on this Picturefill srcset

I have the following laravel code:

<img sizes="(min-width:600px)100vw, (max-width:601px)100vw"
      srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" />

What I'm trying to do is to display the 600x600 image for width < 600px, and the 410x620 for width > 600px.

The code above works on desktop. But on a iPhone (iOS 8.1.2, safari/chrome), it displays the 410x620 image instead. It works properly (both desktop and mobile) without Picturefill included, except IE9 - IE11.

Is there something I'm missing here?

Solution:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }}" media="(max-width: 600px)">
  <source srcset="{{ asset('assets/img/img-home-experiences-410x620.jpg') }}" media="(min-width: 601px)">
  <!--[if IE 9]></video><![endif]-->
  <img sizes="100vw" srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" />
</picture>

Upvotes: 0

Views: 1057

Answers (1)

alexander farkas
alexander farkas

Reputation: 14134

There are multiple errors:

  1. sizes="(min-width:600px)100vw, (max-width:601px)100vw" doesn't make any sense The default value of sizes is 100vw. So your sizes is computed, if min-width: 600px matches, use 100vw, if max-width: 601px use 100vw, otherwise use 100vw

  2. You set the descriptor 601w for an 410 pixel wide image. This is just wrong.

  3. I don't know, but it seems that you don't use the same image in different sizes, but you use 2 different images (one is 600x600 the other is 410x620). This means, that you don't want to offer different candidates, where the browser can choose from, it means you want different images depending on your layout??? And in that case you should use picture


<picture>
    <source media="(min-width:600px)" srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }}" />
    <source srcset="{{ asset('assets/img/img-home-experiences-410x620.jpg') }}" />
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</picture>

Upvotes: 0

Related Questions