响应式图片

响应式图片

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

srcset

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

x

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

    

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

w

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

    

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

注意

sizes单独存在无效

你可能感兴趣的:(html)