CSS「p_w_picpath-set」 解决了背景图片的响应式问题，但是 HTML中的 img 元素如何处理？

<picture alt="">

<source src=hires.png media="min-width:800px">

<source src=midres.png media="min-width:480px">

<source src=lores.png>

<!-- 不支持的浏览器降级处理 -->

<img src=midres.png alt="">

</picture>

于此同时，其他的一些想法如雨后春笋般涌现出来，于是 W3C 社区讨论组 Responsive Images Community Group 应运而生。最新的规范在这里：http://picture.responsivep_w_picpaths.org/ （W3C http://www.w3.org/TR/html-picture-element/）。截止本文发布时间，最近一次更新是 2013年4月24日，规范示例：

<picture width="500" height="500">

<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">

<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">

<source srcset="small-1.jpg 1x, small-2.jpg 2x">

<img src="small-1.jpg" alt="">

<p>Accessible text</p>

可以看到这里的「srcset」属性类似「p_w_picpath-set」，通常情况下，「srcset」里面的资源是具有 fallback 特性的，也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。但是 Apple 的 eoconnor 提出的方案是这样的：

<img src="foo-lores.jpg"

srcset="foo-hires.jpg 2x,

foo-superduperhires.jpg 6.5x"

alt="decent alt text for foo.">

任何一个新标准的提出，都会存在各种不同的声音，这是好事，作为网页的最终开发者其实并不太关心实现语法。有任何问题大家也可以直接到 HTML5 中文兴趣小组参与讨论。

我们可以在CSS 中使用「p_w_picpath-set」属性值，因为目前大部分 Retina 屏幕的设备的浏览器都是基于 Webkit 内核的，如果有特殊的需求可以使用 Media Queries。

查看原文请参考网址：http://mingkr.com/html5-response-img

查看原文网站首页：http://mingkr.com

转载于:https://blog.51cto.com/mingkrcom/1437315

HTML5 处理响应式图片相关推荐

  1. 分享一个非常有用的HTML5+CSS3响应式图片案例

    随着Retina屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种 ...

  2. 【HTML5】响应式图片

    jq width() .height()获取的是图片加载到页面上的图片显示尺寸(图片标签width.height属性值或max-width后的值)而非图片真实尺寸:所以虽然在小屏设备上看到的图片小但是 ...

  3. 【转】CSS 与 HTML5 响应式图片

    关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错. 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图 ...

  4. HTML5 响应式图片

    现在上网设备越来越多,各种设备的屏幕千差万别,如果只用一张图片去涵盖所有的设备,一是可能会造成某些设备上显示效果不佳,比如使用了一张低清晰度的图,而网页运行在一个高清大屏里:二是可能会浪费带宽,比如使 ...

  5. html中图片响应式怎么写,如何使用 HTML5 的picture元素处理响应式图片

    图片在响应式网页设计中是出了名的最具挑战性的方面之一.今天我们就来看看如何使用元素来处理响应式图片. 让我们先了解一下问题 固定宽度,像素完美的网站设计已经离我们远去了.在宽屏显示器,互联网电视,多尺 ...

  6. CSS 与 HTML5 响应式图片

    随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...

  7. html5手机端响应式图片相册幻灯片插件特效

    html5手机端响应式图片相册幻灯片插件特效 作品介绍 1.网页作品简介方面 :html5手机端响应式图片相册幻灯片插件特效 2.网页作品编辑方面:作品下载后可使用任意HTML编辑软件(例如:DW.H ...

  8. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  9. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

最新文章

  1. CV00-02-CV基本操作1
  2. 靠拿奖学金完成学业后，博士生为女友放弃年薪30万工作选择留校任教
  3. ArrayList如何实现插入的数据按自定义的方式有序存放
  4. c# 如何让tooltip显示文字换行
  5. Sql Server相关报错解决
  6. const成员或者引用成员必须使用构造函数初始化列表的方式
  7. 在js中获取input中的value
  8. 【数据平台】Centos下仅CPU安装TensorFlow
  9. 昇思MindSpore年终盘点 | 看完这篇正式开启虎年！
  10. 在 .NET Core 中使用 ViewConfig 调试配置
  11. Airflow 中文文档翻译和改进活动 | ApacheCN
  12. java EE设计模式--spring企业级开发最佳实践文摘
  13. 设计模式练习：Decorate模式
  14. 算法: 最大矩形面积85. Maximal Rectangle
  15. Win10 误删winsock注册表修复。 winsock.reg
  16. 屏幕录制一键截图工具 FastStone Capture 9.0 绿色便携中文版
  17. Linux命令----压缩解压缩
  18. Spark之SparkStreaming-Input DStreams and Receivers
  19. Vue图片在为动态变量路径显示不出来怎么办 ,但是通过img标签显示正常 这是为什么?
  20. html div 居中心,div在屏幕中水平居中 div内容居中

热门文章

  1. mysql数据库二级233_MySQL数据库开发必备常识
  2. Day2-springmvc初解
  3. 前后端分离 集群负载均衡 分布式 微服务
  4. 浮点数正则表达式_正则表达式的邮箱，手机号，身份证号，密码
  5. 写一副对子_挥毫泼墨写春联 西安街头年味分外浓
  6. gitlab的日常使用
  7. Mongodb的安装部署
  8. c语言函数打印零星,C语言零星笔记--（const、typedef）
  9. 评论与回复php代码,php – 显示评论和回复？
  10. 内存文件系统-md伪设备