html – 为什么带有srcset的img请求超过1个版本的图像

概述我有以下标签并检查网络面板,我发现它没有像我期望的那样工作.我不知道这是本地或带宽测试的正常行为,还是我的代码有问题： <img sizes=" (min-width: 300px) 300px, (min-width: 450px) 600px, (min-width: 1000px) 1200px, ((max-width: 450px) and (min-resolution 我有以下标签并检查网络面板,我发现它没有像我期望的那样工作.我不知道这是本地或带宽测试的正常行为,还是我的代码有问题：

<img sizes="  (min-wIDth: 300px) 300px,(min-wIDth: 450px) 600px,(min-wIDth: 1000px) 1200px,((max-wIDth: 450px) and (min-resolution: 2dppx)) 600px"srcset="  /uploaded/coso_300.jpg 300w,/uploaded/coso_600.jpg 600w,/uploaded/coso_1200.jpg 1200w,/uploaded/coso_2000.jpg 2000w"src="/uploaded/coso.jpg" >@H_404_12@  
这些文件按以下顺序在320px宽视口中选择：
  
> coso_600.jpg> coso.jpg(我期待coso_300.jpg)
  
宽度为600px：
  
>和以前一样(我期待coso_300.jpg)
  
宽度为1300像素：
  
> coso_300.jpg> coso.jpg> coso_600.jpg(我期待coso_1200.jpg)
  
在2500px宽屏幕上：
  
>相同(我期待coso_2000.jpg)
解决方法 尝试使用< picture>标签.  
参见  HTML element  
  
  
<picture>  <source     media="(min-wIDth: 300px)"    srcset="coso_300.jpg">  <source     media="(min-wIDth: 600px)"    srcset="coso_600.jpg">  <source     media="(min-wIDth: 1200px)"    srcset="coso_1200.jpg">  <source     media="(min-wIDth: 2000px)"    srcset="coso_2000.jpg">  <img     src="/uploaded/coso.jpg"     alt="Image"></picture>@H_404_12@                            	          总结       
以上是内存溢出为你收集整理的html – 为什么带有srcset的img请求超过1个版本的图像全部内容，希望文章能够帮你解决html – 为什么带有srcset的img请求超过1个版本的图像所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1057909.html