Я пытался использовать srcset в своем проекте для запроса и загрузки нужного изображения, зависит от размера браузера, но я получаю неверный результат на вкладке Сеть в Chrome Developer Tools.
вот мой код
<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 Version 73