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>被選爲候選人。）