解决图片放大模糊

首先需要了解设备像素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)。

相关推荐
欢脱的小猴子22 分钟前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳24 分钟前
CSS 基础概念
前端·css·css3
前端小巷子24 分钟前
JS 实现图片瀑布流布局
前端·javascript·面试
Juchecar31 分钟前
AI教你常识之 npm / pnpm / package.json
前端
薛定谔的猫238 分钟前
前端工程化系列(一):编码规范相关
前端·代码规范·前端工程化
ZKshun41 分钟前
[ 前端性能优化 - 图片压缩 ] WebP格式的的图片性能到底有多优秀?
前端
杜蒙44 分钟前
React Hooks 详解
前端·javascript
南囝coding44 分钟前
Claude Code 从入门到精通:最全配置指南和工具推荐
前端·后端
索马里亚纳海参炒贩1 小时前
useCallback useMemo memo 三个区别和作用
前端·react native
非ban必选1 小时前
netty-scoket.io路径配置
java·服务器·前端