Picturefill.js：需要帮助转换<picture>到<img> srcset /尺寸方法

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>被选为候选人。）