时间戳

首页 > 解决方案 > 响应式 img 从 srcset 获取错误的图像

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

问题描述

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

我有以下 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：

2. 视口宽度 667px - 1399px：

3. 视口宽度 1400+ 像素：

实际行为：

在谷歌浏览器中测试，使用开发工具检查上述所有示例的 img 上的元素，在每种情况下生成的“CurrentSrc”是：

  1. /app/uploads/2018/07/1400x750-520x279.png （正确）

  2. /app/uploads/2018/07/1400x750-1280x686.png （不正确（期望 420 像素宽度）

  3. /app/uploads/2018/07/1400x750.png （不正确（预期为 600 像素宽度）

我摸不着头脑，其他类似的问题似乎都归结为谷歌浏览器缓存问题，但我在测试时小心翼翼地消除了这个问题，但我仍然没有得到我期望的 src 图像。

我只有 90% 确定我已经为我想要的行为编写了正确的“大小”属性。请注意，由于与响应式 CSS 断点对齐并尝试在上下文中加载合理的图像宽度，逻辑稍微复杂。

标签： htmlimagemedia-queriessrcset

解决方案

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

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

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

因此，对于您指定的断点，预期如下：

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

例子：

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

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

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

例子：

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

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

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

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

有几个潜在的问题需要仔细检查。确保你有头脑<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">

推荐阅读