响应式的图片标签

对于不同的屏幕尺寸、分辨率或者其他大小不一的屏幕设备,需要在上面呈现出良好的图片<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 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd79417 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You25 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生36 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端