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

自适应图片

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

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

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

选择不同分辨率的图片

<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图片，依次类推。

image.png

考虑img宽度

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

<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标签解决

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

上面的例子中准备了三种不同尺寸的图片，source定义了不同屏幕大小时所使用的图片，img设定了默认使用的图片。

posted @ 2023-07-27 14:12  sanhuamao  阅读(50)  评论(0)  编辑  收藏  举报