javascript - Picturefill.js：需要帮助转换到srcset/sizes 方法

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

Assuming that the "mobile" image is a scaled-down version of the "desktop" image, and the widths of the images are 384 and 768 respectively, and you want the image to be 100vw wide up to 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">

If your "mobile" image is a cropped version of the "desktop" image (art direction), then you should be using <picture>. (You can drop the second <source> though, the <img> is picked up as a candidate.)