解决图片放大模糊

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

相关推荐
前端 贾公子9 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB242 小时前
html复习
javascript·microsoft·html
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控