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

我要做的是显示600x600图像的宽度＆lt; 600px，宽度为410x620＆gt; 600px的。

上面的代码适用于桌面。但在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>

Answer 1

有多个错误：

sizes="(min-width:600px)100vw, (max-width:601px)100vw"没有任何意义 size的默认值为100vw。所以你的尺寸是计算的，如果最小宽度：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的帮助

1 个答案: