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

2023年9月27日 148次阅读

我有以下标签并检查网络面板,我发现它没有像我期望的那样工作.我不知道这是本地或带宽测试的正常行为,还是我的代码有问题：

<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" >

这些文件按以下顺序在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>
点赞