响应式图片 srcset 和sizes属性
2017-06-28 19:28
246 查看
一、什么是响应式图片?
1、同样是普通屏幕(相对与retain等高清屏幕而言)上,在手机屏幕上显示小图片,在电脑浏览器上显示大图片。
2、同样大小的屏幕上,普通设备上显示普清图片,高清屏幕(如 retain屏幕)的设备上显示高清图片。
二、如何实现响应式图片?
1、使用一张图片+css样式
<div style="text-align: center" style="width: 100%">
<img src="css/a.png" style="width: 80%">
</div>
这样图片始终保持在频幕居中位置,且长度为外层div的80%宽
2、多张图片
上面那种方式,如果图片被拉伸过大会导致图片不清楚,影响用户体验。所以我们可以提供多张图片让浏览器选择最合适的。
2.1 采用媒体查询的方式
@media only screen and (max-width : 512px) {
.img { background-image: url(sunset-small.jpg); }
}
@media only screen and (max-width : 1024px) {
.img { background-image: url(sunset-large.jpg); }
}
only :只针对,同类的有all media(所有设备)
screen:适应计算机彩色屏幕,同类的还有print(适应打印预览模式下查看的内容或者打印机打印的内容)
and:与条件 同类有or
max-width :1024px 适应浏览器的最小宽度为 1024 像素,同类还有(指定min-width,width)
2.2 srcset和sizes新属性
srcset和sizes是HTML5新支持的属性,浏览器支持情况如下:
http://caniuse.mojijs.com/Home/Html/item/key/srcset/index.html
<img class="image" src="mm-width-128px.jpg"
srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
sizes="(max-width: 360px) 340px, 128px">
src:当设备不支持srcset,sizes属性时,使用这个图片
srcset: 列出图片资源, 格式为srcset=”[图片URL] [图片宽度], [图片URL]
[图片宽度]…”,按最新的标准,单位“w”表示当前显示宽度的像素值。解释起来就是这张图片在低于128px宽度的时候,显示小图"mm-width-128px.jpg",;高于128像素且低于256px时,显示中等尺寸图片“mm-width-256px.jpg”;当图片显示尺寸大于512px时就显示全尺寸图“mm-width-512px.jpg”。
sizes:用来表示尺寸临界点。
语法如下: sizes=”[media query] [length], [media query] [length] … etc”
例如上述代码中,
如果
注意,这里所有的值都是指宽度值,且单位任意,
表示当视区宽度不大于360像素时候,图片宽度为整个视区宽度减去20像素的大小。
size = “(max-width: 360px) 340px”
(max-width: 360px)是媒体查询,表示当视图宽度不大于360px时,图片的宽度限制为340像素(这个宽度指的是css指定的图片大小,也称为渲染尺寸)。当设备像素比是1的时候,应该使用大于等于340w规格的图片,所以浏览器会选择mm-width-512px.jpg
当设备像素比是2的时候,应该使用大于等于340*2=680w规格的图片
为什么呢?因为设备像素比是2,代表设备放2个像素点,但实际我们看到的宽度只有一个像素,也就是设备上正常显示1个像素大小需要2个像素点,这就是高清的由来,相当于图片压缩了。可是srcset里没有大于等于680w的图片,浏览器只有尽量选择高清的图,即mm-width-512px.jpg。
Eg 当视觉宽度为400px(>360px),图片的宽度限制为128像素
设备像素比为1时,选择>=128w规格的图(即mm-width-128px.jpg)
设备像素比为2时,选择>=128*2w(图片限制的宽度*设备像素比),规格的图片即mm-width-256px.jpg ,设备像素比为3时,选择512w规格的图,设备像素比为4时,选择640w规格的图(可以没有提供,于是选择了512w的图)
2. sizes=”(max-width: 360px) calc(100vw - 20px) "
代表:当视图宽度不大于360px时,应该使用大于100%视觉宽度-20px的规格的图片
(注:vw代表视觉宽度的百分比)
Eg 当视觉宽度为250px,设备像素比为1时,,图片的宽度限制为(250px-20px)=230px,
设备像素比为1,选择规格230w以上的图片,所以应该选mm-width-256px.jpg这张图来显示
设备像素比为2,选择230*2w以上的图片,所以选择mm-width-512px.jpg这张图来显示
参考资料:
响应式图片srcset全新释义sizes属性w描述符
响应式图片加载属性srcset和sizes
响应式图片
根据不同的屏幕分辨率,和设备像素比来尽可能选择高分辨率的图片。 或者换个角度来说,当在小屏幕上不需要高清图或大图,这样我们用小图代替,就可以减少网络带宽啦。
1、同样是普通屏幕(相对与retain等高清屏幕而言)上,在手机屏幕上显示小图片,在电脑浏览器上显示大图片。
2、同样大小的屏幕上,普通设备上显示普清图片,高清屏幕(如 retain屏幕)的设备上显示高清图片。
二、如何实现响应式图片?
1、使用一张图片+css样式
<div style="text-align: center" style="width: 100%">
<img src="css/a.png" style="width: 80%">
</div>
这样图片始终保持在频幕居中位置,且长度为外层div的80%宽
2、多张图片
上面那种方式,如果图片被拉伸过大会导致图片不清楚,影响用户体验。所以我们可以提供多张图片让浏览器选择最合适的。
2.1 采用媒体查询的方式
@media only screen and (max-width : 512px) {
.img { background-image: url(sunset-small.jpg); }
}
@media only screen and (max-width : 1024px) {
.img { background-image: url(sunset-large.jpg); }
}
only :只针对,同类的有all media(所有设备)
screen:适应计算机彩色屏幕,同类的还有print(适应打印预览模式下查看的内容或者打印机打印的内容)
and:与条件 同类有or
max-width :1024px 适应浏览器的最小宽度为 1024 像素,同类还有(指定min-width,width)
2.2 srcset和sizes新属性
srcset和sizes是HTML5新支持的属性,浏览器支持情况如下:
http://caniuse.mojijs.com/Home/Html/item/key/srcset/index.html
<img class="image" src="mm-width-128px.jpg"
srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
sizes="(max-width: 360px) 340px, 128px">
src:当设备不支持srcset,sizes属性时,使用这个图片
srcset: 列出图片资源, 格式为srcset=”[图片URL] [图片宽度], [图片URL]
[图片宽度]…”,按最新的标准,单位“w”表示当前显示宽度的像素值。解释起来就是这张图片在低于128px宽度的时候,显示小图"mm-width-128px.jpg",;高于128像素且低于256px时,显示中等尺寸图片“mm-width-256px.jpg”;当图片显示尺寸大于512px时就显示全尺寸图“mm-width-512px.jpg”。
sizes:用来表示尺寸临界点。
语法如下: sizes=”[media query] [length], [media query] [length] … etc”
例如上述代码中,
size = "(max-width: 360px) 340px, 128px"表示当视区宽度不大于360像素时候,图片的宽度限制为340像素,其他情况下,使用128像素。
如果
sizes="128px", 则尺寸就一直是128像素,图片只会根据设备像素比发生变化。
注意,这里所有的值都是指宽度值,且单位任意,
em,
px,
cm,
vw,
...都是可以的,甚至可以CSS3的
calc计算(对应下面demo页面第2张图),例如:
sizes="(max-width: 360px) calc(100vw - 20px), 128px"
表示当视区宽度不大于360像素时候,图片宽度为整个视区宽度减去20像素的大小。
size = “(max-width: 360px) 340px”
(max-width: 360px)是媒体查询,表示当视图宽度不大于360px时,图片的宽度限制为340像素(这个宽度指的是css指定的图片大小,也称为渲染尺寸)。当设备像素比是1的时候,应该使用大于等于340w规格的图片,所以浏览器会选择mm-width-512px.jpg
当设备像素比是2的时候,应该使用大于等于340*2=680w规格的图片
为什么呢?因为设备像素比是2,代表设备放2个像素点,但实际我们看到的宽度只有一个像素,也就是设备上正常显示1个像素大小需要2个像素点,这就是高清的由来,相当于图片压缩了。可是srcset里没有大于等于680w的图片,浏览器只有尽量选择高清的图,即mm-width-512px.jpg。
Eg 当视觉宽度为400px(>360px),图片的宽度限制为128像素
设备像素比为1时,选择>=128w规格的图(即mm-width-128px.jpg)
设备像素比为2时,选择>=128*2w(图片限制的宽度*设备像素比),规格的图片即mm-width-256px.jpg ,设备像素比为3时,选择512w规格的图,设备像素比为4时,选择640w规格的图(可以没有提供,于是选择了512w的图)
2. sizes=”(max-width: 360px) calc(100vw - 20px) "
代表:当视图宽度不大于360px时,应该使用大于100%视觉宽度-20px的规格的图片
(注:vw代表视觉宽度的百分比)
Eg 当视觉宽度为250px,设备像素比为1时,,图片的宽度限制为(250px-20px)=230px,
设备像素比为1,选择规格230w以上的图片,所以应该选mm-width-256px.jpg这张图来显示
设备像素比为2,选择230*2w以上的图片,所以选择mm-width-512px.jpg这张图来显示
参考资料:
响应式图片srcset全新释义sizes属性w描述符
响应式图片加载属性srcset和sizes
响应式图片
相关文章推荐
- srcset属性实现响应式图片
- 浅谈CSS响应式图片运用中的srcset属性
- 响应式图片srcset学习
- img srcset,sizes 属性,解决了在不同设备像素比不同的情况加载不同图片(转)
- 响应式轮播图片,,图片包裹层,图片定位 大小,等属性设置
- srcset图片响应式方案中的w到底是什么?
- 响应式图片 <img src=,srcset=,sizes=>
- 响应式图片二 通过srcset实现
- 设置网页背景图片平铺方式 background-repeat 属性
- CSS教程:关于网页图片的属性
- ImageList图片透明显示问题,XP下,16位色显示属性和32色显示属性显示不同。
- 图片IMG标记的alt属性和title属性(转)
- 解决javascript动态改变img的src属性图片不显示问题
- fckeditor(2.6) 二次开发,添加新的选项卡到图片属性对话框
- 图片IMG标记的alt属性和title属性的使用
- CSS 关于网页图片的属性
- 用私有属性来拯救IE7缩放图片的失真
- 图片alt属性内换行
- 使用onpropertychange属性实现FILEUPLOAD的图片预览功能!
- CSS 滤镜属性(图片透明)