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

自适应图片

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

相关推荐
土了个豆子的3 分钟前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人16 分钟前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
xw526 分钟前
移动端调试上篇
前端
@菜菜_达29 分钟前
Lodash方法总结
开发语言·前端·javascript
YAY_tyy39 分钟前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码1 小时前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
在路上`1 小时前
前端学习之后端java小白(三)-sql外键约束一对多
java·前端·学习
Pu_Nine_92 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
東雪蓮☆3 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵3 小时前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee