srcset仅加载最大的图像 [英] srcset only loads largest image

问题描述

我有这个带有几个不同src的图像标签，并且只加载了一个.我觉得我已按照指示进行操作，但它仅加载600px宽度的图像(w_600图像).

I have this image tag with a few different srcs and it's only loading the one. I feel like I followed the directions, but it's only loading the 600px width image (w_600 image).

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

这是一个实时演示

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

I'm trying to get it to load the largest image one desktops, and the smallest image on mobile devices, but it'a always loading the large image. Am I misunderstanding the purpose of srcset?

推荐答案

尝试一下，看看，

<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仅加载最大的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！