解决图片放大模糊

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

相关推荐
FlowGram13 小时前
低代码设计态变量挑战与设计 — 前端变量引擎介绍
前端·低代码
大西瓜瓜瓜14 小时前
PS2020,将所有图片不剪切,调整为800×800像素的文档尺寸。
前端
sjin14 小时前
React源码 - 大名鼎鼎的Fiber
前端
子兮曰14 小时前
🚀从单体到Monorepo:四川省xxx协会官网架构重生记
前端·next.js·turbopack
白水清风14 小时前
CI/CD学习记录(基于GitLab)
前端·自动化运维·前端工程化
齐杰拉14 小时前
源码精读:拆解 ChatGPT 打字机效果背后的数据流水线
前端·chatgpt
文心快码BaiduComate14 小时前
“一人即团队”——一句话驱动智能体团队
前端·后端·程序员
我是ed14 小时前
# vue3 实现前端生成水印效果
前端
IAtlantiscsdn14 小时前
Redis7底层数据结构解析
前端·数据结构·bootstrap
小枫编程14 小时前
Spring Boot 与前端文件上传跨域问题:Multipart、CORS 与网关配置
前端·spring boot·后端