响应式的图片标签

对于不同的屏幕尺寸、分辨率或者其他大小不一的屏幕设备,需要在上面呈现出良好的图片<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、参考地址

相关推荐
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书