526互联

img的srcset属性的作用

发布时间 2023-09-16 09:55:27作者: 婷宝_知萌
  1. img标签的srcset可以用来处理页面在不同像素密度终端设备上对图片的选择性展示
  2. sizes作用就在于告诉浏览器根据【屏幕尺寸]和【像素密度】的计算值从srcset中选择最佳的图片源。
< img src="density-x1.jpg" 
          srcset="density-x1.jpg 1x>
1.如果当前浏览器不认识 srcset 属性的情况下，浏览器会默认显示 src 中的图片。 2、如果浏览器认识 srcset 属性，那么浏览器会根据当前屏幕的像素密度来选择相应的图片。
<img src="../static/images/128.png" srcset="../static/images/128.png 350w" sizes="(max-width: 320px) 100px, 1024px">

srcset 中的 w 单位，可以理解成图片质量

 sizes="(max-width: 320px) 100px, 1024px"

浏览器唯一知道的就是视口高度，不知道图片的真实尺寸

首先浏览器会读取 sizes 然后根据媒体情况来选择，如果匹配到某个值，就根据这个值的长度值单位乘以屏幕像素密度，最终得出来的值再与srcset 中的宽度描述匹配来选择图片。