在这个Picturefill srcset上需要帮助

Question

我有以下laravel代码：

<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" />

我要做的是显示宽度<600‘m的600x600图像，宽度>600’m的410x620图像。

上面的代码在桌面上工作。但是在iPhone (iOS 8.1.2，safari/chrome)上，它会显示410x620图像。它正常工作(桌面和移动)，不包括皮图，除了IE9 - IE11。

这里有什么东西我遗漏了吗？

溶液

<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>

Answer 1

有多个错误：

1. sizes="(min-width:600px)100vw, (max-width:601px)100vw"没有任何意义，尺寸的默认值是100‘t。因此，计算您的大小，如果最小宽度:600 So匹配，则使用100 So，如果最大宽度:601 So使用100 So，否则使用100 So。
2. 您为410像素宽的图像设置描述符601w。这是不对的。
3. 我不知道，但您似乎没有使用相同的图像在不同的大小，但您使用两个不同的图像(一个是600x600，另一个是410x620)。这意味着，您不想提供不同的候选人，在哪里浏览器可以选择，这意味着您想要不同的图像取决于您的布局？在这种情况下，您应该使用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>