image的srcset属性

介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到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没有兼容到,已经全部都兼容了,可以放心使用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第94天:CSS3 盒模型详解

9420
来自专栏前端技术总结

三种方法实现CSS三栏布局

本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果。

2K640
来自专栏WindCoder

删除Discuz首页“今日”“昨日”“欢迎新会员”等文字

进入templeta/default/forum/Discuz.htm   (使用非默认模版的请修改当前使用模版的discuz.htm)删除以下代码即可

51710
来自专栏前端下午茶

CSS margin合并问题

在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折...

35530
来自专栏WindCoder

JQ+CSS实现简单文字重组

注:$("#xixi").css()中top、left等属性不可有小数点,不然会出现无法改变属性的效果。

16210
来自专栏十月梦想

ES6基础语法之箭头函数

ES6直接在参数中=默认值就解决,上述中只是出一个参数的默认值,多个参数下ES6的便利性毋庸置疑!

24110
来自专栏angularejs学习篇

div高度自适应

div高度自适应, 一般设置min-height值即可。 如min-height: 200px, 当div的内容高于200px时, div会自动伸展。IE6不支...

41530
来自专栏WebDeveloper

css的高级用法

15030
来自专栏WindCoder

自定义百度分享

网上教程太多,具体步骤不再一一叙述,仅提几个注意点,最后会提供源码下载,应该会很容易看懂。

11620

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励