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

Question

在隐身模式下使用 Google Chrome 进行了测试，每次都使用“清空缓存和硬重新加载”重新加载页面。

我有以下 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。视口(viewport)宽度 0px - 666px:

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

<强>2。视口(viewport)宽度 667 像素 - 1399 像素:

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

<强>3。视口(viewport)宽度 1400+ 像素:

• 浏览器应采用默认值 535px，并从 srcset 中选择宽度大于 535px 的最小 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 (错误(预期宽度为 420 像素)

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

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

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

Answer 1

关于 srcset 的一些说明和 sizes属性定义浏览器应选择显示哪个图像的方式(有关详细信息，请参阅 Responsive images)。

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

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

因此对于您指定的断点，预计会出现以下情况:

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

例子:

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

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

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

例子:

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

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

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

注意:Retina 和其他高分辨率显示器稍微改变了数学，导致浏览器或多或少地将其在上述每个示例中选择的图像宽度加倍(参见 Responsive images: if you're just changing resolutions, use 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">