要使一张图片不论在移动端还是在桌面端都能适应区域内容，可以使用 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. struts2的s：iterator 标签 详解

    s:iterator 标签有3个属性:value:被迭代的集合id   :指定集合里面的元素的idstatus 迭代元素的索引1:jsp页面定义元素写法 数组或list <s:iterator ...

  2. 0x和H都表示十六进制有什么区别吗？

    0x是16进制的前缀,H是16进制的后缀 都是表示十六进制数,意义上没有什么区别,完全相等.至于什么时候用0x,什么时候用H,这取决于你在什么环境下使用,如果在C/C++,必须用0x来表示. 在C语言 ...

  3. &是什么运算符(转)

    &表示两种运算符,其中一种表示取值运算符,一种是按位与 取值运算符 int a=1; int *p=&a; //其中&a表示的就是把a中的地址取出来,然后赋给指针变量,也就是说 ...

  4. loj 1031(区间dp+记忆化搜索）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1031 思路:dp[i][j]表示从区间i-j中能取得的最大值,然后就是枚举分割点了. ...

  5. SPEL语言-Spring Expression Language

    Spring表达式语言全称为"Spring Expression Language",缩写为"SpEL",类似于Struts 2x中使用的OGNL表达式语言,能 ...

  6. this和$(this)区别

    This代表当前元素,是javascript关键词中的一个,表示上下文中的当前DOM元素,不能调用Jquery方法: $(this)返回一个Jquery对象,可调用多个方法.

  7. 10692 XYM-入门之道

    Description 在华农的ACM界中,也有一对闻名古今的双胖师徒组合—XYM和BM. BM师父有一个特殊的癖好,BM肚子很大,因为他很 喜欢吃西瓜,但是BM的嘴很小,一次只能吃下大小不超过K的西 ...

  8. 游戏 scrollView

    using UnityEngine; using System.Collections; public class LLL : MonoBehaviour { Vector2 scrollPositi ...

  9. BZOJ3834 : [Poi2014]Solar Panels

    问题相当于找到一个最大的k满足在$[x_1,x_2]$,$[y_1,y_2]$中都有k的倍数 等价于$\frac{x_2}{k}>\frac{x_1-1}{k}$且$\frac{y_2}{k}& ...

  10. ZOJ 3805 (树形DP)

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5337 题目大意:方块连接,呈树形.每个方块有两种接法,一种接在父块 ...