flexbox布局下图片srcset属性无法正常切换资源是什么原因？

问题核心原因 #

你没有给img标签添加sizes属性，这是使用带宽度描述符（w后缀）的srcset时的必填属性。
浏览器默认逻辑为：如果未声明sizes，会默认判定图片的显示宽度等于100%视口宽度，计算出来的所需加载图片尺寸和你三列布局下的实际图片宽度不匹配，自然不会按你预期的阈值切换资源。

修复方案 #

1. 给img标签添加sizes属性，匹配你三列布局的实际显示宽度：

<img 
src="../../Image base/1920x1080/img1B.jpg" 
alt=""
srcset="
../../Image base/1920x1080/img1B.jpg 400w,
../../Image base/1920x1080/img2B.jpg 600w,
../../Image base/1920x1080/img3B.jpg 800w
"
sizes="(max-width: 768px) 100vw, 33vw"
>

上面的sizes声明含义为：视口宽度小于768px时图片占满全宽，否则占视口宽度的1/3，和你的flex布局逻辑一致，浏览器就会根据这个值计算需要加载的对应尺寸图片。
2. 排查其他可能的影响因素：

• srcset里写的400w、600w、800w必须和对应图片的实际像素宽度完全一致，如果标注的宽度和图片实际分辨率不符，浏览器会忽略对应资源。
• 资源路径里的Image base带有空格，建议要么把空格转义为%20，要么给每个资源路径加上引号，避免路径解析错误。
• 测试时禁用浏览器缓存，已经加载过的大尺寸图片浏览器会优先复用，不会再切换回小尺寸。

关于是否和图片自身分辨率有关 #

确实有关，除了上面提到的srcset的w值要和图片实际宽度匹配之外，浏览器还会结合设备像素比（DPR）计算最终需要的图片尺寸，比如2倍屏的设备会要求图片宽度是显示宽度的2倍，你配置的资源尺寸如果和计算结果不匹配也不会触发切换。

内容的提问来源于stack exchange，提问作者Kamil Bizoń