响应式img从srcset获取错误的图像

Question

在隐身模式下使用谷歌浏览器进行测试,每次都使用"空缓存和硬重新加载"重新加载页面.

我有以下html响应图像:

<img class="content-img" src="/app/uploads/2018/07/1400x750.png" 

srcset="/app/uploads/2018/07/1400x750.png 1400w, 
        /app/uploads/2018/07/1400x750-768x411.png 768w, 
        /app/uploads/2018/07/1400x750-1280x686.png 1280w, 
        /app/uploads/2018/07/1400x750-520x279.png 520w, 
        /app/uploads/2018/07/1400x750-420x225.png 420w, 
        /app/uploads/2018/07/1400x750-340x182.png 340w, 
        /app/uploads/2018/07/1400x750-600x321.png 600w" 

sizes="(max-width: 666px) 100vw, (max-width: 1399px) 38vw, 535px" 
>

预期行为:

1.视口宽度0px - 666px:

• 浏览器应采用完整的视口像素宽度,例如450px,并从srcset中选择宽度大于450px的最小src,在本例中为'/app/uploads/2018/07/1400x750-520x279.png'

2.视口宽度667像素 - 1399像素:

• 浏览器应占视口宽度的38%,例如380px @ 1000px视口,并从宽度大于380px的srcset中选择最小的src,在本例中为'/app/uploads/2018/07/1400x750-420x225.png'

3.视口宽度1400+ px:

• 浏览器应采用默认值535px并从宽度大于535px的srcset中选择最小的src,在本例中为'/app/uploads/2018/07/1400x750-600x321.png'

实际行为:

在Google Chrome中进行测试,使用开发工具检查img上的所有上述示例中的元素,在每种情况下生成的"CurrentSrc"是:

1. /app/uploads/2018/07/1400x750-520x279.png (正确)

2. /app/uploads/2018/07/1400x750-1280x686.png (INCORRECT(预期宽度为420px)

3. /app/uploads/2018/07/1400x750.png (INCORRECT(期望600px宽度)

我一直在挠头,其他类似的问题似乎都归结为谷歌Chrome缓存问题,但我在测试时已经小心消除了这个问题,但我仍然没有得到我期望的src图像.

我只有90%确定我已经为我想要的行为编写了正确的"尺寸"属性.请注意,由于排列了响应式CSS断点并尝试在上下文中加载合理的图像宽度,因此逻辑稍微复杂一些.

Answer 1

关于srcset和sizes属性如何定义浏览器选择显示图像的方式的一些说明（有关更多详细信息，请参阅响应式图像）。

首先，浏览器检查sizes属性以找到适用于当前设备宽度的第一个媒体条件。因此，对于您指定的断点，浏览器应在最大 666px 宽的设备上以完整视口宽度显示所选图像，然后在 667px 和 1399px 宽之间的设备上以视口宽度的 38% 显示所选图像，最后为设备以固定的 535px 宽度显示大于 1399 像素宽。

其次，浏览器检查srcset属性以查找与sizes属性确定的图像槽大小最匹配的图像（如上所述）。

因此，对于您指定的断点，请期待以下内容：

1）对于宽度不超过666px的设备，浏览器应该选择最接近设备宽度的图片宽度（而不是大于设备宽度的最小图片）。

例子：

在 450px 宽的设备上，浏览器应选择 420w 图像。

在 599 像素宽的设备上，浏览器应选择 600w 图像。

2) 对于宽度在 667px 到 1399px 之间的设备，浏览器应该选择最接近设备宽度 38% 的图像宽度。

例子：

在 1000px 宽的设备上，浏览器应该选择 340w 图像或 420w 图像（不确定在拆分差异时它如何选择，因为媒体查询确定的图像插槽大小是 380px）

在 1366px 宽的设备上，浏览器应该选择 520w 图像（因为媒体查询确定的插槽大小是 519px）

3) 对于宽度超过 1399px 的设备，浏览器应选择 520w 图像（因为媒体查询确定的插槽大小是固定的 535px）。

注意：Retina 和其他高分辨率显示器稍微改变了数学，导致浏览器或多或少地将其在上述每个示例中选择的图像宽度加倍（请参阅响应式图像：如果您只是更改分辨率，请使用源集）。

需要仔细检查的几个潜在问题。确保您有头脑<meta name="viewport" content="width=device-width">，以便您测试的设备在加载页面时被迫采用其实际宽度。还要确保您没有冲突的 css 或 js 干扰图像的显示。

如果您避免了这些问题，那么您的代码看起来还不错，下面的类似代码段为我提供了预期的结果，尽管正如您已经注意到的那样，您在测试时必须小心缓存（稍微不同的组织可能会帮助您更快地扫描哪个应根据不同情况选择图像）。下面是一个使用占位符图像的片段，显示它们的宽度，这可能有助于您的测试。

<img srcset="https://via.placeholder.com/340x182 340w,
             https://via.placeholder.com/420x225 420w,
             https://via.placeholder.com/520x279 520w,
             https://via.placeholder.com/600x321 600w,
             https://via.placeholder.com/768x411 768w,
             https://via.placeholder.com/1280x686 1280w,
             https://via.placeholder.com/1400x750 1400w"
     sizes="(max-width: 666px) 100vw,
            (max-width: 1399px) 38vw,
            535px"
     src="https://via.placeholder.com/340x182"
     alt="placeholder image">