昨天突然i想起来前两年尝试过的
这个属性,当时赶着完成课程设计,在firebox发现有效果,在chrome上半点用都没,但是这玩意的兼容性如下:
- img-srcset
其实兼容性我觉得挺好的,所以我还是要再尝试尝试!
具有两个版本:
- srcsert
- ![](mm@1x.jpg)
- <img src="./img/x-pc.png"
- srcset="./img/x-pc.png 300w, ./img/x-pc@2x.png 500w"
- sizes="(min-width: 300px) 400px, calc(100vw - 2rem)">
emm.....旧版不想说了,反正不好用也已经被淘汰了,新版的,其实很简单:
这个属性定义图片然后告诉浏览器你图片的宽度
- srcset
这个属性定义在不同情况下,对于图片宽度的定义,单位除了不能使用%(很费解,不过可以用vw代替),calc()也可以
- sizes
懒得录gif,当你宽度慢慢增大一个临界点时浏览器会去加载二倍图并且替换,
规定了图片的大小,比如第一个例子上图片大小恒定500px,注意sizes的合理设置,否则会产生图片大小的跳动,得到两个结论:
- sizes
我们来探究一下w这个单位,先从
这个属性说起。sizes相当于动态定义图片的
- sizes
和
- width
,然后我们把上面的例子做一些修改:
- height
- <img src="./img/x-pc.png"
- srcset="./img/x-pc.png 150w, ./img/x-pc@2x.png 250w"
- sizes="(min-width: 200px) 400px, calc(100vw - 20px)">
图1: 2 (150px - 20px)
图2: 2 (171px - 20px)
我个人的理解是:w只是告诉浏览器,我认为这张图是什么大小,浏览器会根据你给的值取计算出一个比值,比如上面这个比值是2,然后去乘下面的sizes,公式就是:
实际渲染大小 = (原图大小 / 声明大小) * 对应的sizes
我猜测,如果按w等于图片宽度的话,在高质量的图片下并不合适,所以w只是起到一个描述图片尺寸作用,就和你爸妈一样,我觉得XXXXXX。
我瞎写,你随便看看就好,觉得哪里不对可以留言
来源: https://juejin.im/post/59f6c0146fb9a045023ae9d9