响应式图片

Posted 2021-09-03 zyan

响应式图片

img标签在html5.1中新增加了srcset和sizes属性，可以用来实现图片的响应式

srcset

srcset可以用来指定多张图像，可以用不同的描符来进行区分

x

x用来描述不同的像素密度倍数，例如1x, 2x, 3x, 写法为

    <img
      srcset="./nice/2.gif 3x, ./nice/1.jpg 2x, ./nice/1.gif"
      src="./nice/2.jpg"
    />

当像素比与所设的不匹配的时候，会进行向上匹配，即2x的没有预设，则会选用3x的，src属性会被标识为1x，srcset中没有写1x也会标识为1x。先匹配srcset中，再匹配src中的。

w

w用来描述图片资源的尺寸，此时的写法为

    <img
      srcset="./nice/1.jpg 1920w, ./nice/big.jpg 800w"
      sizes="(max-width: 700px) 500px, (max-width: 1280px) 700px"
      src="./nice/4.jpg"
    />

sizes中的前半句为媒体查询，后半句为图片的显示宽度。显示宽度可以写px或者vw。 浏览器首先根据媒体查询找到显示的图片大小，然后乘以设备像素比，去跟图片像素比较，显示最接近的

注意

sizes单独存在无效