7. img 的 srcset 属性的作用？

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的 srcset 属性。srcset 属性用于设置不同屏幕密度下, img 会自动加载不同的图片。用法如下:

<img src="data:image-128.png" srcset="image-256.png 2x"/>

使用上面的代码, 就能实现在屏幕密度为 1x 的情况下加载 image-128.png, 屏幕密度为 2x 时加载 image-256.png。按照上面的实现, 不同的屏幕密度都要设置图片地址, 目前的屏幕密度有 1x, 2x, 3x, 4x 四种, 如果每一个图片都设置 4 张图片, 加载就会很慢。所以就有了新的 srcset 标准。代码如下:

<img src="data:image-128.png"srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"sizes="(max-width: 360px) 340px, 128px"/>

其中 srcset 指定图片的地址和对应的图片质量。sizes 用来设置图片的尺寸零界点。对于 srcset 中的 w 单位, 可以理解成图片质量。如果可视区域小于这个质量的值, 就可以使用。浏览器会自动选择一个最小的可用图片。

sizes 语法如下:

sizes="[media query] [length], [media query] [length] ... "

sizes 就是指默认显示 128px, 如果视区宽度大于 360px, 则显示 340px。

7. img 的 srcset 属性的作用？相关推荐

img srcset sizes 的作用
img 标签的 srcset sizes 像素密度: 一开始,img 标签的 srcset 可以用来处理页面在不同像素密度终端设备上对图片的选择性展示. 举个例子,例如下面这个img: < im ...
浏览器各个属性的作用
作为前端程序员不可避免的会和浏览器打交道,所以要对浏览器的各个属性的作用进行了解,方便开发及调试,这里以谷歌浏览器为例进行简单的介绍.一是巩固对浏览器属性的认识,二是方便大家的学习. 首先打开谷歌浏览 ...
html中属性的作用,html的标签中 unselectable=on 属性的作用
在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件. 加上该属性的元素不能被选中. < !DOCTYPE ...
响应式图片（srcset属性和picture元素）
自适应网页设计意味着,不仅我们的布局能根据设备特性而变化,内容也可以.例如,高分辨率 (2x) 显示屏上高分辨率图形可保证清晰度.当浏览器宽度为 800px 时,一张 50% 宽度的图像或许很适合,但 ...
img元素srcset属性浅析
img srcset 属性 img 元素的 srcset 属性用于浏览器根据宽.高和像素密度来加载相应的图片资源. 属性格式:图片地址宽度描述w 像素密度描述x,多个资源之间用逗号分隔.例如: &l ...
Vue中key属性的作用
Vue中key属性的作用在列表渲染时使用key属性使用key属性强制替换元素在列表渲染时使用key属性相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用 ...
html中outline属性,css的outline属性的作用是什么
css的outline属性的作用是什么发布时间:2020-05-06 11:47:34 来源:亿速云阅读:280 作者:小新 css的outline属性的作用是什么?相信有很多人都不太了解,今天小 ...
SEO链接为什么要用nofollow，nofollow属性的作用是什么，nofollow的用法
在SEO领域中,有很多SEO专业做了几年SEO优化,可能都不知道nofollow是干什么的,那么下面长沙seo搜遇网络顾问带大家了解一下nofollow.nofollow是如何运用的. nofollo ...
association内属性及作用
嵌套查询association内属性及作用多对一多表查询 <select id="getUserRolePageList" resultMap="roleLis ...

7. img 的 srcset 属性的作用？

7. img 的 srcset 属性的作用？

7. img 的 srcset 属性的作用？相关推荐

最新文章

热门文章