要使一张图片不论在移动端还是在桌面端都能适应区域内容，可以使用 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. java中值类型和引用类型的区别

    [定义] 引用类型表示你操作的数据是同一个,也就是说当你传一个参数给另一个方法时,你在另一个方法中改变这个变量的值,那么调用这个方法是传入的变量的值也将改变. 值类型表示复制一个当前变量传给方法,当你 ...

  2. oracle 10g 学习之PL/SQL简介和简单使用（10）

    PL /SQL是一种高级数据库程序设计语言,该语言专门用于在各种环境下对ORACLE数据库进行访问.由于该语言集成于数据库服务器中,所以PL/SQL代码可以对数据进行快速高效的处理.PL/SQL是 P ...

  3. HTML 学习新理论

    一直觉得没有时间,现在看到这样的网站: Bootstrap学习http://www.runoob.com/bootstrap/bootstrap-environment-setup.html Less ...

  4. etc/profile和/etc/environment的比较

    转自:http://andy136566.iteye.com/blog/1025338 先将export LANG=zh_CN加入/etc/profile ,退出系统重新登录,登录提示显示英文.将/e ...

  5. C语言中，宏和全局变量的区别是什么？

    全局变量 是可以在程序中任何地方使用 而且是可以修改的 宏定义也可以在任何地方使用 但是不能在之后修改 数据类型没有限制的 宏的例子:#define 宏名 宏体 #define PI 3.141592 ...

  6. hdu 4640(状压dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4640 思路:f[i][j]表示一个人状态i下走到j的最小花费,dp[i][j]表示i个人在状态j下的最 ...

  7. P/Invoke .NET调用win32API

    项目:无线无源测温软件系统 项目中,用到使用P/Invoke在.NET调用win32API,实现对ini配置文件的读写功能!因为有一些配置信息需要保存下来,以便在下一次启动程序完成初始化,这实际上是一 ...

  8. 框架模式 MVC 在Android中的使用

    算来学习Android开发已有2年的历史了,在这2年的学习当中,基本掌握了Android的基础知识.越到后面的学习越感觉困难,一来是自认为android没啥可学的了(自认为的,其实还有很多知识科学), ...

  9. 2016.7.9 计算机网络复习要点第四章之虚拟专用网VPN和网络地址转换NAT

    1.虚拟专用网VPN (1)一个机构内,对于那些仅在本机构内部使用的计算机就可以由本季候自行分配其IP地址,让这些计算机使用仅在本机构有效的IP地址(本地地址),不需要申请全球唯一的IP地址(全球地址 ...

  10. D FFF团的怒火

    Time Limit:1000MS  Memory Limit:65535K 题型: 编程题   语言: 无限制 描述 在信软学院,男女比例失衡已经是习以为常的事情. 在这样的一个学院,诞生了一个神秘 ...