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

Question

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

桌面尺寸（超过 768 像素）的图像应为 220 像素宽（4 个图像列）。
480 像素和 767 像素之间的宽度应最大为 420 像素（1 个图像列）。
移动设备尺寸（小于 479 像素）的宽度不应超过 260 像素（1 个图像列）。

每张图片我都有三个来源。 220 像素、260 像素和 420 像素。

从上面可以看出，尺寸不符合视口越小图像越小的正常惯例，所以我一直在研究和尝试各种选择。

根据建议，我一直在隐身模式下使用 Google Chrome 并且还在 Internet Explorer 中进行私密浏览，浏览器视口在加载页面之前开始变小，等等...确保我所做的任何更改得到更新。

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

我的代码目前是这样的：

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

我在讨论这个问题时提出了第二个问题。最好将我的场景中的默认 img src 设置为 260px 图像吗？因为如果 srcset 不被理解并且只有中等大小的视口 (460-767px) 会受到影响，这将涵盖桌面和移动浏览器。还是最好将默认图像设置为最小尺寸？

如有任何建议，我们将不胜感激。

-- 编辑--

只是一个快速的更新，我以为我昨天已经从逻辑上解决了这个问题，但它没有用，所以我不确定我是否仍然理解计算的整个概念。我最近的编辑看起来像这样：

<img sizes="(min-width: 460px) 420px, (min-width: 768px) 220px, 100vm"
    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"
/>

所以在我看来，我认为我列出的尺寸部分说明...如果视口至少为 460 像素，则使用 420 像素的图像，否则如果视口至少为 768 像素，则使用 260 像素的图像。那么最后的 100vm 意味着否则使用在全视口宽度下最好的那个。我还将默认文件修改为 260px 文件，因为如果无法识别某些内容，这适合大多数视口大小。

但是，上述编辑仍然只加载 420px 图像。

如有任何建议，我们将不胜感激。哪怕只是为了纠正我的逻辑！

Answer 1

sizes 从左到右求值。所以顺序很重要。如果视口为 1000px，则第一个媒体条件 (min-width: 460px) 将匹配，因此选择大小 420px，并且根本不评估 sizes 属性的其余部分。

另外，单位应该是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 中，因为较旧的 WebKit 仅具有部分 x-only srcset 实现将在不理解描述符时选择第一项。

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

image breakpoint srcset - what to do with larger images used in middle viewport sizes?

image

responsive-design

srcset