Image 图像断点srcset-如何处理中间视口大小中使用的较大图像？

我一直在致力于一个新的响应式网站设计，我有一个包含网格图像的图库，当浏览器视口为768px或以上时，该图库跨越4列宽（因此每个图像约占视口的25%）。任何767px或更低的值都只有1列宽（使其在分辨率较低时为全宽）

• 桌面大小（超过768px）的图像应为220px宽（4个图像列）
• 480px和767px之间的宽度应高达420px（1个图像列）
• 移动设备的尺寸（479px以下）应达到260px宽（1个图像列）

我有三个来源，每个图像。220px、260px和420px

从上面可以看出，大小不符合视口越小图像越小的正常惯例，因此我一直在研究和尝试各种选项

根据建议，我一直在隐姓埋名模式下使用Google Chrome，也在internet explorer的私人浏览中使用，浏览器的视口在加载页面之前开始变小，等等。。。以确保我所做的任何更改都得到更新

我现在看到的代码是最接近于使其工作的代码，它是在回答某人关于堆栈溢出的查询（类似于我的查询）之后编写的。然而，当尝试实现它时，我似乎无法让浏览器加载正确的图像，它总是加载更大的420px宽的图像

我的代码目前是这样的：

---

大小从左到右求值。所以顺序很重要。如果视口为1000px，则第一个介质条件
（最小宽度：460px）
将匹配，因此选择大小
420px
，而不计算其余的
size
属性

此外，装置应为
vw
，而不是
vm

因此，它应该是：

<img sizes="(min-width: 768px) 220px, (min-width: 460px) 420px, 100vw"
     srcset="images/thumbs/image_420.jpg 420w,    
             images/thumbs/image_260.jpg 260w,    
             images/thumbs/image_220.jpg 220w"    
        src="images/thumbs/image_260.jpg"
        alt="example image"
/>



至于您的第二个查询，从技术上讲，您可以选择您喜欢的任何图像（即使是未在srcset中列出的图像），但您的推理对我来说是有意义的。我唯一建议的是将您选择的
src
图像放在
srcset
中的第一位，因为使用部分
x
-只有
srcset
实现的旧WebKit在不理解描述符时才会选择第一项。
我现在在您的问题中看到，您希望图像的分辨率高达420px，而分辨率高达240px。这是可能的，但取决于你想发生什么。它应该是
calc（100vw-40px）
（固定利润率）？或者
91.3vw
（流体边缘）？嗨，Zcorpan，首先感谢您的回复和帮助。我一直在努力理解这一点&你的修订非常有意义（从左到右），效果非常好。然而，我已经意识到260px图像不是使用代码加载的。我添加了一个（最大宽度：480px）：
（最小宽度：768px）220px，（最大宽度：479px）260px，（最小宽度：480px）420px，100vw
我交换了srcset的顺序，首先设置260px图像，然后设置420px，最后设置220px。此外，我的最小宽度图460px错误，这应该是480px。再次感谢！关于你的评论，我并没有明确表示要达到Xpx。这些图片都是设定的宽度，所以请接受我的道歉。我使用的布局实现了960网格样式表。当浏览器视口的宽度大于960px时，四列中每列的大小都设置为220px宽，每列的两侧都有10px的边距。同样，对于较小尺寸的图像，边距和宽度是固定的，因此没有流体边距。我的网站还有一个页面，它使用了一个滑动条，滑动条有流畅的宽度、边距和图像，所以我可能需要重新访问srcset编码来查看这个页面。好的，很高兴你找到了它。请注意，如果有3种可能的大小，则在
大小中只需要2种介质条件，并且可以在没有介质条件匹配时使用最终值。就我个人而言，我也会尝试只使用最小宽度或最大宽度，以减少大部分混淆。：-）