Picturefill.js:需要帮助转换<图片>到<img>srcset/sites方法

Picturefill.js: Need help converting <picture> to the <img> srcset/sizes method

本文关键字：gt lt img srcset 方法 sites js 图片 转换 帮助 Picturefill      更新时间：2023-09-26

这就是我所拥有的。。。

<picture>
    <source srcset="assets/images/home/desktop-hero.jpg" media="(min-width: 768px)" />
    <source srcset="assets/images/home/mobile-hero.jpg" media="(max-width: 767px)" />
    <img class="hero-image-main ratio-content" src="assets/images/home/mobile-hero.jpg" />
</picture>

假设"移动"图像是"桌面"图像的缩小版，图像的宽度分别为384和768，并且您希望图像的宽度为100vw，最大768px。。。

<img src="assets/images/home/mobile-hero.jpg"
     srcset="assets/images/home/mobile-hero.jpg 384w,
             assets/images/home/desktop-hero.jpg 768w"
     sizes="(min-width:768px) 768px, 100vw">

如果你的"移动"图像是"桌面"图像的裁剪版本（艺术指导），那么你应该使用<picture>。（不过，您可以删除第二个<source>，<img>将被选为候选。）

相关文章：