响应式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.视口宽度0px-666px：

• 浏览器应该获取完整的视口像素宽度，例如450px，并从宽度大于450px的srcset中选择最小的src，在这种情况下'/app/上传/2018/07/1400x750-520x279.png'

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

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

3.视口宽度1400像素：

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

实际行为：

在谷歌Chrome中测试，使用开发工具检查img上的元素，对于所有上述示例，在每种情况下产生的“货币Src”是：

>

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

/app/uploads/2018/07/1400x750-1280x686.png（不正确（预期宽度为420px）

/app/uploads/2018/07/1400x750.png（不正确（预计宽度为600px）

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

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

Answer 1

我注意到，对于srcset，顺序很重要。

出于某种原因，从最大的图像到最小的图像都起作用了，而相反却没有。

我不完全确定这是否是一件真实的事情，但我把它留在这里，希望它能帮助一些人。

成功的例子：

<img srcset="{{block.settings.slide-image | img_url:'1250x' }} 1227w
{{block.settings.slide-image | img_url:'1100x' }} 1079w,
{{block.settings.slide-image | img_url:'956x' }} 936w,
{{block.settings.slide-image | img_url:'795x' }} 775w,
{{block.settings.slide-image | img_url:'620x' }} 600w,
{{block.settings.slide-image | img_url:'520x' }} 500w,
{{block.settings.slide-image | img_url:'456x' }} 436w"
src="{{block.settings.slide-image | img_url:'456x' }}" />

不起作用的示例：

<img srcset="{{block.settings.slide-image | img_url:'456x' }} 436w,
{{block.settings.slide-image | img_url:'520x' }} 500w,
{{block.settings.slide-image | img_url:'620x' }} 600w,
{{block.settings.slide-image | img_url:'795x' }} 775w,
{{block.settings.slide-image | img_url:'956x' }} 936w,
{{block.settings.slide-image | img_url:'1100x' }} 1079w,
{{block.settings.slide-image | img_url:'1250x' }} 1227w"
src="{{block.settings.slide-image | img_url:'456x' }}" />

Answer 2

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

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

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

因此，对于您指定的断点，应包括以下内容：

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

示例：

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

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

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

示例：

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

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

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

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

几个潜在的陷阱需要仔细检查。确保你有

如果你已经避免了陷阱，你的代码在其他方面看起来很好，下面的类似片段给了我预期的结果，尽管你在测试时必须小心缓存，因为你已经注意到了（稍微不同的组织可能会帮助你更快地扫描哪些图像应该在不同的情况下被选择）。下面是使用占位符图像的片段，这些占位符图像显示了它们的宽度，这可能有助于您的测试。

<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">