响应式的图片标签

对于不同的屏幕尺寸、分辨率或者其他大小不一的屏幕设备,需要在上面呈现出良好的图片<img>元素,本文主要针对元素<img>的响应式这种情况,列举一些解决思路。

1、现象

观察下图,通过鼠标控制放大缩小,不断的放大后,图片清晰度就会慢慢出现模糊,越放大,像素就会越小

2、背景原因:

关于devicePixelRatio像素大小的比率公式:

window.devicePixelRatio=当前设备的物理像素分辨率/css像素分辨率

要保证图片1:1显示的话,前提条件需要保证devicePixelRatio为1。一旦通过鼠标伸缩放大或者更改设备的分辨率,导致devicePixelRatio不一样情况下,需要通过更改(图像真实物理尺寸=图片的css尺寸*devicePixelRatio),这样图片仍然可以保持清晰度

3、解决方案:

当前<img>元素的响应式图片,主要与css的媒体查询优化有点类似,一个侧重于图片,一个侧重于css

a、基于分辨率

  • 当你想要为窄屏提供更小的图片时,因为小屏幕不需要像桌面端显示那么大的图片;以及你想为高/低分辨率屏幕提供不同分辨率的图片时,都可以通过矢量图(SVG 图片)、srcset 以及 sizes 属性来实现。
  • 使用img的srcset来解决设备像素比:
    • srcset属性允许您指定一系列图像和它们对应的设备像素比。浏览器根据设备的屏幕像素密度选择合适的图像进行加载
ini 复制代码
<img
  srcset="elva-fairy-400w.jpg 2x, elva-fairy-600w.jpg 3x"
  src="elva-fairy-200w.jpg"
  alt="Elva dressed as a fairy" />
  • 使用img的srcsetsizes来解决不同视口尺寸与设备像素比
    • srcset的写法:文件名+空格+图片固定宽度。下文案例中,宽度里使用的480w表示图片原始物理宽度为480px
    • sizes的写法,媒体查询+空格+槽的宽度,其中这个槽的宽度主要是为了与srcset提供的宽度进行最接近的匹配
html 复制代码
<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

b、picture基于美术设计

  • 当你想为不同布局提供不同剪裁的图片------比如在桌面布局上显示完整的、横向图片,而在手机布局上显示一张剪裁过的、突出重点的纵向图片,可以用 <picture> 元素来实现。
  • 主要使用media和srcset来解决响应式图片

在线测试地址:mdn.github.io/learning-ar...

800px以下:

800px以上:

html 复制代码
<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>
  • 拓展:满足各个浏览器,使用最新现代图像格式
html 复制代码
<picture>
  <source type="image/svg+xml" srcset="pyramid.svg" />
  <source type="image/webp" srcset="pyramid.webp" />
  <img
    src="pyramid.png"
    alt="regular pyramid built from four equilateral triangles" />
</picture>

4、优势

  • 提供更好的用体验,确保不同设备显示最佳效果
  • 不同分辨率加载不同大小的图片资源,优化网页加载速度

5、next内置图片优化

由于项目中使用next.js的架构,引用图片资源,基本是使用next的内置组件,在处理不同屏幕或者像素下,处理的方案是跟上述原理一样的,只是图片资源被next提前处理了。

scss 复制代码
<div className="relative w-[2.67rem] h-[2.67rem] rounded-[.44rem] mx-[.89rem] overflow-hidden"> 
<Image fill src="xxxx/xxxx/xxxxxx/popstone2" sizes="(min-width: 1440px) 64.44rem, 20rem" /> 
</div>

产生效果如图所示:

6、参考地址

相关推荐
Mintopia4 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李5 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
拾光拾趣录7 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia7 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽9 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥10 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023414 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder19 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder19 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep27 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员