代码之家 › 专栏 › 技术社区 › TJBlackman

srcset只加载最大的图像

image css html

-1

TJBlackman · 技术社区 · 7 年前

我有一些不同的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 ?

1 回复 | 直到 7 年前

Sachi.Dila 7 年前

试试看,

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

希望这有帮助。

推荐文章