(译)响应式图片— srcset 和 sizes 属性
在响应式网页设计的革命中,图片看起来是被浪潮落下的一个事物。直到最近,根据不同的屏幕尺寸和像素密度来提供不同的图片还是没有完全实现。
<picture>
元素展示了很多改变这个局面的希望,但无论picture元素是否可以完全使用,现在有两个对于响应式图片很关键的两个属性 —— srcset
和 sizes
。
srcset
属性
srcset
属性允许我们可以提供一系列也许可以被浏览器使用的图片资源。我们提供一个以逗号为分割的图片list,user agent会根据设备特性来决定哪一张图片来显示在网页上。
当listing图片时,我们提供每张图片两个信息 ——
图片文件的_路径_
图片文件的_宽度_或者_像素密度_
为了定义_像素密度_,我们添加一个x
来表示图片的密度数值。举个栗子 —-
<img src="one.png" srcset="two.png 2x, three.png 3x, four.png 4x"\>
在图片 src
中定义的默认为图片的 1x
。
在2012年srcset
属性第一次提出时,我们只能提供不同的像素密度的图片,就像上面例子中显示的。然而,在2014年新添加了width
属性,它可以使我们根据不同的宽度来提供不同的图片。
为了指定图片的宽度,我们添加一个w
来表示图片的像素宽度。举个栗子 —-
<img src="one.png" srcset="two.png 100w, three.png 500w, four.png 1000w"\>
只有在srcset
中使用了宽度,我们才能随之设置sizes
属性。
sizes
属性
sizes
属性明确定义了图片在不同的media conditions下应该显示的尺寸。
<img src="one.png" srcset="two.png 100w, three.png 500w, four.png 1000w"sizes="<media condition> <width>,<media condition> <width>,<optional default image width>"\>
Media Conditions
Media Conditions不是确切的媒体查询。它是一部分的媒体查询。他不允许我们明确定义媒体类型,比如 screen
或者 print
,但是允许我们经常使用的媒体查询。
可以使用的有 —-
A plain media condition 比如
(min-width: 900px)
A “not” media condition 比如
( not (orientation: landscape) )
An “and” media condition 比如
(orientation: landscape) and (min-width: 900px)
An “or” media condition 比如
( (orientation: portrait) or (max-width: 500px) )
width
width
可以使用任意的长度单位,比如:em, rem, pixels, 和 viewport width。
然而,百分比单位是不允许的,如果需要使用相对单位,vw
是推荐使用的。
合体
把Media Conditions
和 width
合在一起 —-
<img src="one.png" srcset="two.png 100w, three.png 500w, four.png 1000w"sizes="(min-width: 900px) 1000px,(max-width: 900px) and (min-width: 400px) 50em,( not (orientation: portrait) ) 300px,( (orientation: landscape) or (min-width: 1000px) ) 50vw, 100vw"\>
浏览器支持
<iframe src="http://caniuse.bitsofco.de/embed/index.html?feat=srcset&amp;periods=future_1,current,past_1,past_2,past_3" frameborder="0" width="100%" height="473px"\></iframe\>
对于不支持这个属性的浏览器,只是加载src
里的图片资源。
译自:Responsive Images - The srcset and sizes Attributes
(译)响应式图片— srcset 和 sizes 属性相关推荐
- html picture属性,html5图片 srcset、sizes 属性和 picture 元素
前言 关于图片img的响应属性srcset,和sizes及picture,很久之前看过,但是因为浏览器兼容原因,一直没有在项目中使用,但是最近发现,这几个属性兼容性还可以了,可以去caniuse中看一 ...
- 响应式图片srcset未生效
<imgsrcset="1.png 1920w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"sizes=" ...
- 前端src显示服务器图片,响应式图像之srcset和sizes属性
再一次提到响应式图像,司空见惯了,有点腻了,如果你看完下面的内容,我觉得你会对响应式图像处理会有新的认知.这篇文章我也是无意在进步博客上看到的,认真的看了几遍,有些东西讲的很不错,所以想分享下. 开发 ...
- 响应式图片的实现(含picture标签、srcset属性、sizes属性的使用方法,设备像素比详解)
什么是响应式图片? 响应式图片即针对不同的设备分辨率和尺寸,显示对应的最佳分辨率的图片. 具体表现为: 高分辨率的屏幕,显示高分辨率图像(确保高清屏上,图片依然足够清晰) 低分辨率的屏幕,显示低分辨率 ...
- 响应式图片img中的srcset和sizes
响应式图片img中的srcset和sizes 参考链接 如果是在小屏手机屏幕上显示网页,那么没有必要在网页上嵌入很大的图片.这被称之为分辨率切换问题(resolution switching prob ...
- HTML5 响应式图片
现在上网设备越来越多,各种设备的屏幕千差万别,如果只用一张图片去涵盖所有的设备,一是可能会造成某些设备上显示效果不佳,比如使用了一张低清晰度的图,而网页运行在一个高清大屏里:二是可能会浪费带宽,比如使 ...
- 【HTML5】响应式图片
jq width() .height()获取的是图片加载到页面上的图片显示尺寸(图片标签width.height属性值或max-width后的值)而非图片真实尺寸:所以虽然在小屏设备上看到的图片小但是 ...
- 【转】CSS 与 HTML5 响应式图片
关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错. 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图 ...
- html中图片响应式怎么写,如何使用 HTML5 的picture元素处理响应式图片
图片在响应式网页设计中是出了名的最具挑战性的方面之一.今天我们就来看看如何使用元素来处理响应式图片. 让我们先了解一下问题 固定宽度,像素完美的网站设计已经离我们远去了.在宽屏显示器,互联网电视,多尺 ...
- CSS 与 HTML5 响应式图片
随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...
最新文章
- Unknown property 'mybatis-plus' yml文件报错
- sharding-jdbc整合mybatis
- DRBD编译安装中出现的问题及解决小结
- Linux 用户和组
- 从零开始学android开发-创建第一个android项目
- OpenGeoSys模拟THMC复杂过程的软件工具
- golang errors 取 错误 信息_golang-标准errors包的学习
- 使用IntelliJ IDEA开发Maven初始化创建流程
- 织梦 php模板修改,织梦专题模板修改.doc
- cherry G80-3000茶轴空格左边失灵,经常无法触发按钮,安装空格卫星轴零件
- 【CSS3】Advanced1:Rounded Corners
- vue仿美团饿了么--底部导航公共组件
- 文本行高——line-height属性
- ios上webview与浏览器webview
- 真王服务器文件,虚惊后的火速报道《真王》迎来历史性更新
- 解决\xEF\xBB\xBF问题
- linux 下oracle备份脚本,linux 下的 oracle 自动备份脚本
- 高位交叉和低位交叉_挑战408——组成原理(13)——并行存储器
- 教你WordPress博客网站搬家和换域名、批量换图片地址方法
- [USACO12Jan][luogu3041] Video Game Combos [AC自动机+dp]
热门文章
- php默认登录文件,PHP 网站修改默认访问文件的nginx配置
- 帆软查询前后鼠标进入到某个位置隐藏或显示参数面板
- #脚本实现宠物动作行为_短视频剧情创作方法有哪些?爆款短视频的标配,只需88个脚本模板...
- 单台主机一键编译部署LAMP+wordpress+discuz系统的shell脚本
- 【图文】远程桌面链接:这可能是由于credssp加密oracle修正
- 在项目中使用HTMLDom的事件冒泡机制
- @Html.DisplayFor 和 @mode.Display
- 对比iOS中的四种数据存储
- ***_ha_高可用_链路备份
- ubuntu10下Eclipse中无法输入中文