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>