vue解决页面放大图片模糊的问题

1.页面放大(或者电脑设置了缩放比例,比如125%),图片模糊

不考虑带宽的情况下,直接请求后端最大尺寸的照片。

2.根据用户电脑的放大倍数或者电脑设置中的放大倍数(DPR),自动请求合适的照片

3.实现:

记住公式:图片尺寸 = css尺寸 * DPR,只要公式成立,就一定是清晰的

4.利用img标签的srcset属性实现,值为:图片地址 + DPR

<template>
    <div>
        <img srcset="
        https://picsum.photos/id/88/150 1x,
        https://picsum.photos/id/88/300 2x,
        https://picsum.photos/id/88/600 4x,
        https://picsum.photos/id/88/900 6x,
        https://picsum.photos/id/88/1200 8x,
        " alt="">
    </div>
</template>

<script>
export default{
    name: 'autoImg',
    data(){
        return {

        }
    }
}
</script>
<style lang="less" scoped>
img{
    width: 150px;
    height: 150px;
}
</style>

5.万一图片的css样式(宽高)不是写死的,用的是百分比,该如何实现?

记住公式:图片尺寸 = css尺寸 * DPR,现在css尺寸不固定,DPR也不固定

6.使用srcset+sizes属性实现,srcset的值改为:图片地址+图片原始尺寸,sizes采用媒介查询,当照片宽度最大是300px时,就当作是150px,然后乘以DPR,会自动选择合适图片地址。

<template>
    <div>
        <img srcset="
        https://picsum.photos/id/88/150 150w,
        https://picsum.photos/id/88/300 300w,
        https://picsum.photos/id/88/600 600w,
        https://picsum.photos/id/88/900 900w,
        https://picsum.photos/id/88/1200 1200w,
        "
        sizes="
        (max-width: 300px) 150px, //当照片宽度最大是300px时,就当作是150px,然后乘以DPR(当为6时),自动选择900w的https://picsum.photos/id/88/900地址(150*6=900)
        (max-width: 600px) 300px,
        (max-width: 900px) 450px,
        (max-width: 1200px) 600px,
        1200px
        "
        alt="">
    </div>
</template>

<script>
export default {
    name: 'autoImg',
    data() {
        return {

        };
    }
};
</script>
<style lang="less" scoped>
img {
    width: 50vw;
    height: 50vh;
    display: block;
    margin: 0 auto;
}
</style>
相关推荐
永乐春秋26 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿27 分钟前
【前端】CSS
前端·css
ggdpzhk29 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app