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

Picturefill.js：需要帮助将<picture>转换为<img/> srcset / sizes方法</picture>

1 个答案: