解决图片放大模糊

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

相关推荐
Beekeeper&&P...22 分钟前
web钩子什么意思
前端·网络
啵咿傲33 分钟前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css
前端Hardy36 分钟前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html
流烟默39 分钟前
CSS中Flex布局应用实践总结
前端·css·flex布局
草字1 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
没有黑科技1 小时前
基于web的音乐网站(Java+SpringBoot+Mysql)
java·前端·spring boot
前端初见2 小时前
彻底搞懂前端环境变量使用和原理
前端
小王码农记2 小时前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
大G哥2 小时前
我用豆包MarsCode IDE 做了一个 CSS 权重小组件
前端·css
乐闻x2 小时前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js