Picturefill.js:需要帮助将<picture>转换为<img>资源集/大小方法

Question

这就是我所拥有的。

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

Answer 1

假设“移动”图像是“桌面”图像的缩小版本，图像的宽度分别为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>将被选为候选对象。)