Srcset属性-最大宽度问题

Question

我在html中有以下标记

<picture>
   <source 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" 
         media="(max-width: 2560px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1920.jpg" 
         media="(max-width: 1920px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1600.jpg" 
         media="(max-width: 1600px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1336.jpg" 
         media="(max-width: 1366px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1200.jpg" 
         media="(max-width: 1200px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_991.jpg" 
         media="(max-width: 991px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_767.jpg" 
         media="(max-width: 767px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_480.jpg" 
         media="(max-width: 480px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_360.jpg" 
         media="(max-width: 360px)">
   <img 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" alt="">
</picture>

`

图像不显示媒体是否设置为最大宽度，而是当设置为最小宽度时工作.

有什么建议吗？

Answer 1

如果您反转源顺序，它将工作，因为它适用于正确的顺序。所以你的最后代码：

<picture>
   <source 
         srcset="img/home-page/placeholders/placeholder_360.jpg" 
         media="(max-width: 360px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_480.jpg" 
         media="(max-width: 480px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_767.jpg" 
         media="(max-width: 767px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_991.jpg" 
         media="(max-width: 991px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1200.jpg" 
         media="(max-width: 1200px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1336.jpg" 
         media="(max-width: 1366px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1600.jpg" 
         media="(max-width: 1600px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1920.jpg" 
         media="(max-width: 1920px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" 
         media="(max-width: 2560px)">
   <img 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" alt="">
</picture>

如果您想应用另一种媒体，如min设备像素比作为您的评论请求，您可以添加它没有问题：

   <source 
         srcset="img/home-page/placeholders/placeholder_2560-3.jpg" 
         media="(max-width: 2560px) and (min-device-pixel-ratio: 3)">

或

   <source 
         srcset="img/home-page/placeholders/placeholder_2560-3.jpg" 
         media="(min-device-pixel-ratio: 3)">