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/uploads/2018/07/1400x750-520x279.png'

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

浏览器应占据视口宽度的38％，例如380px @ 1000px视口，然后从srcset中选择宽度大于380px的最小src，在这种情况下为'/app/uploads/2018/07/1400x750-420x225.png'

3。视口宽度1400+像素：

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

实际行为：

使用上述所有示例的img上的dev工具inspect元素在Google Chrome中进行测试，每种情况下生成的“ CurrentSrc”为：

/app/uploads/2018/07/1400x750-520x279.png （正确）
/app/uploads/2018/07/1400x750-1280x686.png （错误（预期宽度为420px）
/app/uploads/2018/07/1400x750.png （错误（预期宽度为600像素）

我已经挠头了，其他类似的问题似乎都可以归结为一个Google Chrome缓存问题，但是我在测试时已经非常小心地消除了这个问题，但我仍然没有得到src图像期待。

我仅90％确信我已经针对所需的行为编写了正确的“ sizes”属性。请注意，由于要与响应CSS断点对齐并尝试在上下文中加载合理的图像宽度，因此逻辑有些复杂。

Answer 1

对srcset和sizes属性如何定义浏览器选择显示图像的方式进行了一些澄清（有关更多详细信息，请参见Responsive images）。

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

第二，浏览器检查srcset属性以找到与sizes属性所确定的图像插槽尺寸最接近的图像（如上所述）。

因此对于您指定的断点，应满足以下条件：

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

示例：

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

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

2）对于宽度在667像素至1399像素之间的设备，浏览器应选择最接近设备宽度38％的图像宽度。

示例：

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

在1366px宽的设备上，浏览器应选择520w图片（因为媒体查询确定的广告位尺寸为519px）

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

注意：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">

Answer 2

我注意到，涉及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' }}"" />

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

2 个答案: