要使一张图片不论在移动端还是在桌面端都能适应区域内容，可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性。

适应区域内容是指图片的宽或高的长度满足浏览区的内容区域。

HTML5 的 viewport 标签中的 content="width=device-width, initial-scale=1.0" 可以使图片的宽度自适应移动端设备的宽度，且初始缩放比例为1；

CSS3 的 background-size:contian 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

例如代码：

<html><head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <style>

        html,body{height:100%;width:100%;margin:0;padding:0;}

        body{background-image:url(pic.jpg);background-repeat:no-repeat;background-position:top center;background-size:contain;}

    </style>

</head>

<body>

</body></html>

测试的图片尺寸为400px*300px，在chrome v38 下 浏览器宽度 1366px 下查看页面如图：

图片被拉伸，高度与浏览区域高度一致；

再使用 chrome 浏览器的 device mode 功能查看图片在移动端的效果，比如在 300px*640px 屏幕尺寸下的效果如图：

HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容的更多相关文章

  1. HTML5 script 标签的 crossorigin 和integrity属性的作用

    Bootstrap 4 依赖的基础库中出现了两个新的属性 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.m ...

  2. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS3 grayscale滤镜+SVG使图片变黑白实例页面

    CSS代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale( ...

  4. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  5. HTML5 重要标签及其属性学习

    1.google字体:<link href="https://fonts.googleapis.com/css?family=Lobster" rel="style ...

  6. HTML5 <a>标签的ping属性用法

    随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...

  7. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

  8. [转]HTML5 script 标签的 crossorigin 属性到底有什么用？

    HTML5 script 标签的 crossorigin 属性到底有什么用? 最近Bootstrap 4已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4.不过今天要说的不是 ...

  9. html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

随机推荐

  1. DOS下常用网络命令技巧

    DOS,即使对于许多自称了解计算机的人而言,也是一个比较陌生的词汇.然而,在网络管理过程中,DOS命令却是一个不可逾越的障碍,几乎所有的网络命令都运行在DOS界面.对初级用户而言,掌握一些常用网络命令 ...

  2. freopen（）——重定向标准输入输出流

    freopen()——重定向标准输入输出流 头文件:stdio.h 函数原型:FILE * freopen(const char *filename , const char *type ,  FIL ...

  3. Lucene实践

    Lucene 是一个基于 Java 的全文信息检索工具包,它不是一个完整的搜索应用程序,而是为你的应用程序提供索引和搜索功能. OK,大家都知道这个是一个搜索检索工具,那究竟是怎么做检索的,其实道理是 ...

  4. ERStudio的使用

    转自于:http://www.cnblogs.com/TangPro/p/3250320.html 打开ERstudio,点击新建出现如图对话框: 选择第一个,表示创建一个新的关系型 数据库模型 这里 ...

  5. 我对序列化（Serializable）的理解

    转自:http://blog.tianya.cn/blogger/post_show.asp?BlogID=764&PostID=3231409 序列化是把一个对象的状态写入一个字节流的过程. ...

  6. Burp Suite使用介绍

    Burp Suite使用介绍(一)  22人收藏 收藏 2014/05/01 19:54 | 小乐天 | 工具收集 | 占个座先 Getting Started Burp Suite 是用于攻击web ...

  7. SU Demos-03T-F Analysis-01Sugabor

    先看readme, 运行结果,

  8. BFS+模拟 ZOJ 3865 Superbot

    题目传送门 /* BFS+模拟:dp[i][j][p] 表示走到i,j,方向为p的步数为多少: BFS分4种情况入队,最后在终点4个方向寻找最小值:) */ #include <cstdio&g ...

  9. Real Adaboost总结

    Real Adaboost分类器是对经典Adaboost分类器的扩展和提升,经典Adaboost分类器的每个弱分类器仅输出{1,0}或{+1,-1},分类能力较弱,Real Adaboost的每个弱分 ...

  10. KMP算法（转载）

    转载http://blog.csdn.net/yutianzuijin/article/details/11954939 kmp算法又称“看毛片”算法,是一个效率非常高的字符串匹配算法.不过由于其难以 ...