自适应图片

根据屏幕大小选择图片内容。本文为学习笔记，主要内容为img的srcset与sizes属性，以及picture标签。学习内容来自于：

mdn文档：developer.mozilla.org/zh-CN/docs/...
油管视频：www.youtube.com/watch?v=fp9...
视频对应的博客：blog.webdevsimplified.com/2023-05/res...

辅助调试：放在页面上实时监测屏幕大小

html 复制代码

<div style="font-size: 5vw;" id="data"></div>
<script>
      window.addEventListener('resize',updateText)
      updateText()

      function updateText(){
          const dataEl=document.querySelector('#data')
          data.textContent=`Width ${window.innerWidth}, Ratio: ${window.devicePixelRatio}`
      }
</script>

选择不同分辨率的图片

html 复制代码

<img
    style="width: 100vw;"
    src="https://placehold.co/1600x100/png"
    srcset="
        https://placehold.co/400x100/png  400w,
        https://placehold.co/800x100/png  800w,
        https://placehold.co/1600x100/png  1600w
    "
/>

src：默认使用的图片
srcset：定义了可选择的图片，以及宽度描述符/像素密度描述符
- 格式：图片路径描述符，用逗号隔开
- 上面例子含义：当屏幕小于等于400px时，选择400x100的图片；当400px < 屏幕大小< 800px时，将选择800x100图片，依次类推。

考虑img宽度

上面例子设定的图片是铺满屏幕的（100vw），当图片没有铺满屏幕时，就需要用sizes属性了。

html 复制代码

<img
    style="width: 50vw;"
    src="https://placehold.co/1600x100/png"
    srcset="
        https://placehold.co/400x100/png  400w,
        https://placehold.co/800x100/png  800w,
        https://placehold.co/1600x100/png  1600w
    "
    sizes="(max-width: 800px) 100vw, 300px"
/>

sizes ：按顺序判断依次决定图片容器大小。格式：媒体查询容器大小，用逗号隔开，最后为默认的容器大小。

上面例子含义：当视口宽度≤800px时，图片容器是100vw，也就是屏幕宽度；而如果＞800px，图片容器是300px。

具体到700px的屏幕宽度，它小于800px，那么容器宽度就使用100vw，也就是屏幕宽度700px，那图片将选择比700px要大的800x100；而如果屏幕大小为1200px，大于800px,那么容器宽度就使用默认值300px，图片将选择比300px要大的400x100

实时查询屏幕大小选择不同图片

上面的示例存在问题：只要匹配到第一个媒体查询，那么后边的将作废，也就是说图片只认准第一次媒体查询所选择的。这可以通过picture标签解决

html 复制代码

<picture>
  <source media="(max-width: 500px)" srcset="hiking-narrow.jpg" />
  <source media="(max-width: 1000px)" srcset="hiking-medium.jpg" />
  <img src="hiking-wide.jpg" alt="Someone jumping on a hike" />
</picture>

自适应图片：根据屏幕大小选择图片内容

自适应图片

选择不同分辨率的图片

考虑img宽度

实时查询屏幕大小选择不同图片