image的srcset属性
来源:互联网 发布:中国联通音乐软件有些 编辑:程序博客网 时间:2024/06/07 11:56
介绍
响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,image自动加载不同的图片。用法如下:
<img src="image-128.png" srcset="image-256.png 2x" />
使用上面的代码,就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。
新标准
按照上面的实现,不同的屏幕密度都要设置图片地址,目前的屏幕密度有1x,2x,3x,4x四种,如果每一个图片都设置4张图片的话,太麻烦了。所以就有了新的srcset标准。代码如下:
<img src="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。
总结
img的srcset属性方便的解决了页面图片适应不同屏幕密度的情况。目前除了IE没有兼容到,已经全部都兼容了,可以放心使用。
响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,image自动加载不同的图片。用法如下:
<img src="image-128.png" srcset="image-256.png 2x" />
使用上面的代码,就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。
新标准
按照上面的实现,不同的屏幕密度都要设置图片地址,目前的屏幕密度有1x,2x,3x,4x四种,如果每一个图片都设置4张图片的话,太麻烦了。所以就有了新的srcset标准。代码如下:
<img src="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。
总结
img的srcset属性方便的解决了页面图片适应不同屏幕密度的情况。目前除了IE没有兼容到,已经全部都兼容了,可以放心使用。
1 0
- image的srcset属性
- image的srcset属性
- img 标签的新属性Srcset应用
- img 标签的新属性Srcset应用
- img元素srcset属性浅析
- CSS3的srcset size属性1x 2x 3x
- srcset属性实现响应式图片
- 响应式图片 srcset 和sizes属性
- wordpress去掉评论响应式图片srcset属性
- UGUI的image的属性
- 重写UIImageView的image属性
- Image的AccessibilityIdentifier属性使用
- Flex中Application的Image属性
- html中background-image属性的设置
- WPF中Image控件的Source属性
- 获取div的background-image属性
- CSS3的新增属性border-image
- html中background-image属性的设置
- 框架 day74 涛涛商城项目整合ssm,分页插件pagehelper,商品列表查询
- libevent简介和使用
- 关于bootstrap-select赋值时候报错: e.stopPropagation is not a function
- Java常见的几种内存溢出及解决方法
- OutOfMemoryError(内存溢出)
- image的srcset属性
- mysql通用二进制安装
- java 反射demo
- 关于谷歌chrome浏览器“您的链接不是私密链接”的解决办法
- ASP.NET Core应用:文件扫描上传
- Android编码规范
- setupUI
- 讨论、思考题
- java 线程池ThreadPoolExecutor