0

我有以下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 之外，它可以在不包含Picturefill的情况下正常工作（桌面和移动设备） 。

我在这里缺少什么吗？

解决方案：

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

1 回答 1

0

有多个错误：

  1. sizes="(min-width:600px)100vw, (max-width:601px)100vw"没有任何意义 size 的默认值为 100vw。所以你的尺寸是计算出来的，如果 min-width: 600px 匹配，使用 100vw，如果 max-width: 601px 使用 100vw，否则使用 100vw

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

  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>
于 2015-01-10T14:34:19.577 回答