要使一张图片不论在移动端还是在桌面端都能适应区域内容，可以使用 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. mysql_4(解决中文乱码问题）

    mysql> create database if not exists xdb default character set utf8;Query OK, 1 row affected (0.0 ...

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

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

  3. 使yum保留下载的rpm包

    [root@14LN yum]# egrep 'cachedir|keepcache' /etc/yum.conf #cachedir=/var/cache/yum/$basearch/$releas ...

  4. zabbix_agent key 传递参数

    root@(none):/etc/zabbix/zabbix_agentd.conf.d# pwd /etc/zabbix/zabbix_agentd.conf.d root@(none):/etc/ ...

  5. Entity FrameWork 中使用Expression<Func<T,true>>访问数据库性能优化

    问题的本质是:扩展的Where方法有四个参数重载.传进去Func<T,true>那么返回值是IEnumable的接口类型的集合,如果是Expression<Func<T,tru ...

  6. Codeforces Round #Pi (Div. 2) A. Lineland Mail 水

    A. Lineland MailTime Limit: 2 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/567/proble ...

  7. android—获取网络数据

    取网络数据主要靠发交易(或者说请求,接口等),而这些交易由java中的网络通信,HttpURLConnection和HttpClient实现,以下是具体例子.   大家都知道,网络通信,发送请求有两种 ...

  8. Java Web应用调优线程池

    最简单的单线程 我们先从基础开始.无论使用哪种应用服务器或者框架(如Tomcat.Jetty等),他们都有类似的基础实现.Web服务的基础是套接字(socket),套接字负责监听端口,等待TCP连接, ...

  9. Xamarin提示Build-tools版本过老

    Xamarin提示Build-tools版本过老 错误信息:G:\XamarinDemo\Xamarin.Forms-master\packages\Xamarin.Android.Support.V ...

  10. 最短路(Floyd_Warshall) POJ 2240 Arbitrage

    题目传送门 /* 最短路:Floyd模板题 只要把+改为*就ok了,热闹后判断d[i][i]是否大于1 文件输入的ONLINE_JUDGE少写了个_,WA了N遍:) */ #include <c ...