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-device-pixel-ratio作为你的评论请求，你可以添加它没问题：

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

Srcset 属性 - 最大宽度问题

Srcset attribute - max-width issue

html

css

srcset