需要有关此图片填充程序集的帮助

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图像。它可以正常工作（桌面和移动设备），不包括图片填充，除了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"没有任何意义大小的默认值为 100vw。所以你的尺寸是计算的，如果最小宽度：600px 匹配，则使用 100vw，如果最大宽度：601px 使用 100vw，否则使用 100vw

2. 您可以为 410 像素宽的图像设置描述符601w。这是错误的。

3. 我不知道，但似乎您没有使用不同尺寸的相同图像，而是使用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>