我有一只打瞌睡的猫的图像，我有三种不同的尺寸; 320px，700px和1024px。
以下是我的观点：当视口介于0和320px之间时，加载320px版本;当它的321px - 700px加载700px版本时，加载1024px版本。
使用srcset属性，我能够接近这种行为;但是加载的图像与我在srcset中提供的断点无关。
<img srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/338546/cat-320w.jpg 320w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/338546/cat-700w.jpg 700w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/338546/cat-1024w.jpg 1024w"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/338546/cat-1024w.jpg">
正如您所看到的，当视口宽度为237px时会加载700px版本，而当它的424px时加载1024版本。
为了测试这一点，我使用了Chrome开发工具＆＃39;网络选项卡，并禁用缓存。该问题可以在我的演示代码中复制。
为什么会发生这种情况，如何正确控制图像尺寸？