这篇文章是图片响应式解决方案的子文章，属于实验性质。
这篇文章将解决两个问题：
- 浏览器是否是根据w值来选择图片的，是如何选择的？
- 如果w值与图片真实宽度不一致，又会出现哪些问题？
最开始的时候我是理解w标志代表可渲染的位图宽度的，那么是这样么？做个测试
我将test-480.jpg 480w改为了450w,
<img class="image" src="test-240.jpg" srcset="test-240.jpg 240w, test-480.jpg 450w, test-720.jpg 720w sizes="240px">
如果w代表该图片的位图宽度的话，在dpr==2的设备上最多可渲染480px宽的位图
dpr==2, test-480.jpg 450w
而且还发现256/240==480/450，这个结果到底说明什么呢？先不管，继续大胆假设小心验证。然后我们再实验（将720px宽的图片后的w改为了480）：
<img class="image" src="test-240.jpg" srcset="test-240.jpg 240w, test-480.jpg 450w, test-720.jpg 480w" sizes="240px">
dpr==2,test-480.jpg 450w, test-720.jpg 480w
发现通过修改w标志真的是可以欺骗浏览器去选择我们指定的图片的。也就是将w理解为该图片的位图宽度是没有问题的。
那么再回到上一个测试，考虑：根据w值，在没有恰好合适的图片选择的情况下，浏览器会怎么做出决策呢？继续试验：在多次测试时发现，在该情况下， test-480.jpg 对应的w在320和321之间是个分水岭。
<img class="image" src="test-240.jpg" srcset="test-240.jpg 240w, test-480.jpg 320w, test-720.jpg 720w" sizes="240px">
dpr==2,test-480.jpg 320w, test-720.jpg 720w
<img class="image" src="test-240.jpg" srcset="test-240.jpg 240w, test-480.jpg 321w, test-720.jpg 720w" sizes="240px">
dpr==2,test-480.jpg 321w, test-720.jpg 720w
480X1.5=720，480/1.5=320,那么也就是浏览器是根据类似于等比数列而不是等差数列去做出选择的。也就是当没有正好宽度的图片时，浏览器会根据sizes和dpr计算出正确解，然后向拉伸或者压缩的方向以百分比的形式向外扩展，直至获得最优解。另外，当最优解有两个且分别是一个是要拉伸一个要压缩，那么会选择数值较大的那张图片。
那么对于下面这个情况，也就能预测浏览器会选择哪张图片来展示：因为320w和720w距离480px是一样近的。721w肯定就更远一些了。
<img class="image" src="test-240.jpg" srcset="test-240.jpg 240w, test-480.jpg 320w, test-720.jpg 721w" sizes="240px">
dpr==2,test-480.jpg 320w, test-720.jpg 721w
结果支持我们的判断。
好了，折腾这么多，我们终于可以下一个结论，w是对该图片宽度的描述，而且这会直接影响到浏览器对于图片的选择，浏览器选择的标准就是根据sizes和dpr计算所得准确值在w值增大和减小的两个方向上选择一个比值（永远是大数/小数）更小的一个图片显示。
还记得上面遗留的问题么？就是图片显示宽度并不是240px的情况。
拿离我们最近的上面这个图片来做一个解释：浏览器选择的是这个test-480.jpg 320w，根据320w,浏览器就会认为图片的宽度就是320px宽，此时的正确值是480，那么浏览器是要把320px的图片拉伸到480px宽，也就是宽度扩大480/320=1.5倍，来使得在dpr=2的屏上显示宽度为240px。但是图片的实际宽度是480，所以最终的展示宽度就变成了480X1.5/2=360。所以，可以补充一点，当你给照片添加的w值不准确时也是会导致图片展示宽度变化的。
网友评论