Question

我有这个带有几个不同src的图像标签，并且只加载了一个。我感觉自己按照指示行事，但它只加载600px宽的图片（w_600图片）。

<img 
  srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg 520w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg 440w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg 360w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg 280w" 
  sizes="(min-width: 1500px) 600px,
    (max-width: 1200px) 520px,
    (max-width: 992px) 440px,
    (max-width: 768px) 360px,
    (max-width: 480px) 280px" 
  src="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w" 
  alt="picture" 
  class="picture"
/>

这里是Live Demo

我试图让它在台式机上加载最大的图像，在移动设备上加载最小的图像，但是它总是加载大图像。我误解了srcset的目的吗？

Answer 1

尝试一下，看看

<picture>
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1500px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1200px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 992px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media=" (min-width: 768px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 480px)">
    <img srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" alt="Placehold" class="image">
</picture>

希望这会有所帮助。

srcset仅加载最大的图像

1 个答案: