sizes 方法

【问题标题】：Picturefill.js: Need help converting <picture> to the <img> srcset/sizes methodPicturefill.js：需要帮助将 <picture> 转换为 <img> srcset/sizes 方法
【发布时间】：2015-03-26 22:16:57
【问题描述】：

这就是我所拥有的……

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

【问题讨论】：

为什么会被击落？标题清楚地说明了我需要帮助。

标签： javascript responsive-design picturefill

【解决方案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> 被选为候选人。）

【讨论】：