解决图片放大模糊

首先需要了解设备像素CSS像素CSS像素 是 Web 开发中的逻辑像素,设计者根据这些像素来布局页面。设备像素 是设备屏幕上的实际像素点数。

DPR 是 设备像素 和 CSS像素 的比率,所以进行缩放后,也需要对图片尺寸进行处理,以确保清晰度。图像尺寸 = CSS尺寸 * DPR。

可以通过 window.devicePixelRatio 获取当前缩放比例

将图片尺寸根据DPR缩放,150 * 4

更加清晰了

可以使用 srcset 属性设置多个尺寸的图片,浏览器会自动选择最合适的图片

当图片宽高不固定时,上面的方法就不适用了,因为无法确定CSS像素大小,需要使用下面写法

w标识设备像素,浏览器会根据当前设备的视口宽度,结合 sizes 属性计算出图片实际在页面上占据的尺寸(CSS 像素)。然后根据 srcset 中提供的图片宽度选择最合适的图片。

如果视口宽度为 400 像素,且 sizes 指定图片占据 50vw,则图片会占据视口宽度的一半,也就是 200 像素。浏览器会在 srcset 中选择最接近 200 像素的图片,也就是宽度为 300 像素的图片(300w)。

相关推荐
快起来别睡了几秒前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript