使用srcset下载多张（尺寸错误）图像

Question

我尝试在项目中使用srcset来请求和下载适当的图像，具体取决于浏览器的大小，但是我从Chrome开发者工具的“网络”标签中得到了错误的结果。

这是我的代码

<img srcset="
    {{url('/cdn/images/320x700/hotel/hotel-cover-wide-min.jpg')}} 320w,
    {{url('/cdn/images/845x450/hotel/hotel-cover-wide-min.jpg')}} 845w,
    {{url('/cdn/images/1519x670/hotel/hotel-cover-wide-min.jpg')}} 1519w"
    sizes="
    (max-width:767px) 100vw,
    (min-width: 768px) and (max-width: 991px) 100vw,
    (min-width: 992px) and (max-width: 1199px) 100vw,
    (min-width: 1200px) 100vw
     "
    src="{{asset('images/hotel/hotel-cover-wide-min.jpg')}}"
    alt="">

我使用了 Bootstrap 媒体查询，我希望下载最小尺寸（320 * 700）的移动图片（Google chrome设备模拟器）4s（320 * 480）： 我希望此图片可以加载：

'/cdn/images/320x700/hotel/hotel-cover-wide-min.jpg'

但此图片会在“网络”标签中加载：

'/cdn/images/845x450/hotel/hotel-cover-wide-min.jpg'

，在某些情况下，还会同时在“网络”标签中加载2张图片！

它在任何尺寸下都运行不佳

非常感谢有人帮助我解决该问题

我顺便使用了Chrome Canary版本73