响应式图片

<picture>元素与<source>元素

例如需要分别在小于640px 大于640px 小于960px 和大于960px的3个区域内使用small.jpg medium.jpg large.jpg可以这么编码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>响应式图片</title>
 8 </head>
 9 <body>
10     <picture>
11         <source media="(max-width:640px)" srcset="[email protected] 2x, small.jpg 1x"/>
12         <source media="(max-width:960px)" srcset="[email protected] 2x, medium.jpg 1x"/>
13         <source srcset="[email protected] 2x, large.jpg 1x"/>
14         <img src="small.jpg" alt="">
15     </picture>
16 </body>
17 </html>

分析

max-width:640px  表示页面不足640px

[email protected] 2x, small.jpg 1x  告诉浏览器该来源为同一素材提供了两种清晰度的版本

时间： 2024-11-04 21:30:21

响应式图片的相关文章

【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

A.优化站点资源速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap]2.作品展示站点中的资源.特别的,来看一看我们能控制的.影响页面速度的重要因素 —— 文件大小,包括图片.CSS和 JavaScript 文件.只要简单几步,我们就可以给这些文件“瘦身”,缩短加载时间. A.1 优化图片这些图片都通过 Photoshop 的 “保存为 Web 格式” 进行了一

继续送假期干货——响应式图片工具smartImg

中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Github上下载,其实它非常小巧,去掉注释一共也就40行,之所以这么轻便,JQ也是帮了大忙. 应用场景我们在搭建响应式页面时,对于图片的处理或多或少都有些烦躁,例如我们希望在某个屏宽的环境下显示某一张图片,在另一个屏宽的环境下则显示为另一张图片. 这种做法对于用户体验是比较重要的,常规建议是用户用大屏幕设备访问

picturefill + picture 标签实现兼容性很棒的响应式图片自适应屏幕大小

polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到了这个东西 ,它能在浏览器不支持的时候提供一些替代的方式 ,对于响应式图片,有名的picturefill库能实现兼容性强的‘响应式’图片,对于不支持picture的浏览器,它会用js获取srcset后面的设置,然后决定输出什么样的图片使用方法引入js文件(可从cdnjs.com下载) <script

HTML5 处理响应式图片

CSS「image-set」解决了背景图片的响应式问题,但是 HTML中的 img 元素如何处理? <picture > <source src=hires.png media="min-width:800px"> <source src=midres.png media="min-width:480px"> <source src=lores.png>  <

web响应式图片设计实现

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text

响应式图片解决方案——调研

图片是页面中较为重要的元素之一,在目前流行的响应式设计当中,图片也需要随之做出变化,本文就给出了目前业界针对响应式图片给出的各种解决方案. 对img元素增加srcset属性规范地址:http://www.w3.org/TR/html-srcset/ 在img的srcset属性中可以提供若干图片资源地址,并附加使用图片的条件描述,浏览器可根据使用条件来使用对应的资源.srcset的格式要求是:图片资源地址+可选的宽度描述+可选的高度描述+可选的像素密度描述,多个资源和描述组合之间用逗号分隔,例如

bootstrap-内联表单水平（横向）表单响应式图片辅助类 [转]

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewp

8.10 响应式布局2 弹性网络（栅格系统）响应式图片

响应式图片给img的宽度设置为100% 使用background-image 配合padding-top 使用 `<picture>` 标签. * 使用 pricturefill.js 插件 <link rel="stylesheet" href="./grid.css"> stylesheet样式表

CSS3响应式表格和响应式图片

最近跟着某大牛学CSS3,下面是跟着大牛做的两个实例项目,不得不说CSS3真的很强大.另外最近用SAE搭建了一个网站,把最近的实例都放到了里面,等搭建好放出,这样大家就能直观的看到演示效果了建立HTML文件 <!DOCTYPE html> <html> <meta charset="utf-8"> <head> <meta charset="UTF-8"> <title>响应式表格设计<