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

自适应图片

根据屏幕大小选择图片内容。本文为学习笔记,主要内容为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设定了默认使用的图片。

相关推荐
夏梦春蝉5 分钟前
ES6从入门到精通:其他特性
前端·javascript·es6
2301_14725836910 分钟前
7月1日作业
java·前端·算法
汪子熙12 分钟前
Angular 应用中手动调用 subscribe 方法的时机与实践探讨
前端
MiyueFE43 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子1 小时前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术2 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟2 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序