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

自适应图片

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

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

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>

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

相关推荐
namehu3 分钟前
搞定 iOS App 测试包分发,也就这么简单!😎
前端·ios·app
code_YuJun7 分钟前
1. 使用VueCli编译生产环境代码以及创建不同模式
前端
MrGaoGang43 分钟前
耗时1年,终于我也拥有属于自己的AI工作流
前端·agent·ai编程
没有鸡汤吃不下饭1 小时前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
跟橙姐学代码1 小时前
Python时间处理秘籍:别再让日期时间卡住你的代码了!
前端·python·ipython
汤姆Tom1 小时前
从零到精通:现代原子化 CSS 工具链完全攻略 | PostCSS × UnoCSS × TailwindCSS 深度实战
前端·css·面试
菜市口的跳脚长颌1 小时前
Web3基础
前端
RoyLin1 小时前
TypeScript设计模式:代理模式
前端·后端·typescript
IT_陈寒3 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿3 小时前
react 实现插槽slot功能
前端