需要有关此 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 像素的 600x600 图像和宽度 > 600 像素的 410x620 图像。

上面的代码适用于桌面。但在 iPhone（iOS 8.1.2，safari/chrome）上，它显示的是 410x620 图像。它在不包含 Picturefill 的情况下正常工作（台式机和移动设备），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

有多个错误：

sizes="(min-width:600px)100vw, (max-width:601px)100vw" 没有任何意义尺寸的默认值为 100vw。所以你的尺寸是计算出来的，如果 min-width: 600px 匹配，使用 100vw，如果 max-width: 601px 使用 100vw，否则使用 100vw
您为 410 像素宽的图像设置了描述符 601w。这是完全错误的。
我不知道，但您似乎没有使用不同尺寸的相同图像，而是使用了 2 个不同的图像（一个是 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>

需要有关此 Picturefill srcset 的帮助

Need help on this Picturefill srcset

picturefill

srcset