要使一张图片不论在移动端还是在桌面端都能适应区域内容，可以使用 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. Android手势锁实现

    最终效果如下 整体思路 a.自定义了一个RelativeLayout(GestureLockViewGroup)在里面会根据传入的每行的个数,生成多个GestureLockView(就是上面一个个小圈 ...

  2. Rap 安装和配置

    本机环境 系统:CentOS 6.7 64 位 MySQL 5.6 JDK 1.8 Tomcat 8 Redis 3.0.7 Rap 0.14.1 Rap 说明 官网:https://github.c ...

  3. iptables 开启3306端口

    [root@mysqld ~]# mysql -uroot -h 192.168.1.35 -p Enter password: ERROR 1130 (HY000): Host '192.168.1 ...

  4. [译]SQL Server 之 查询计划的简单参数化

    SQL Server能把一些常量自动转化为参数,以重用这些部分的查询计划. SELECT FirstName, LastName, Title FROM Employees WHERE Employe ...

  5. 实现开启和关闭android移动网络（转）

    开启和关闭移动数据网络有两种方法:一种是通过操作系统的数据库改变APN(网络接入点),从而实现开启和关闭移动数据网络,另一种是通过反射调用系统(ConnectivityManager)的setMobl ...

  6. XTU 1242 Yada Number 容斥

    Yada Number Problem Description: Every positive integer can be expressed by multiplication of prime ...

  7. Mosquitto关于Connection lost的问题。

    文章发自:http://www.cnblogs.com/hark0623/p/4175048.html  转发请注明 如果当你的客户端订阅(sub)mqtt时,发现出现Connection lost ...

  8. jmeter性能测试实战-web登录测试

    一.项目背景: 网站信息: 操作系统类型 二.需求: 登录并发测试 三.场景: 1s增加两个线程,运行2000次 分别看20.40.60并发下的表现 四.监控: 成功率.响应时间.标准差.cpu.me ...

  9. 解决修改重命名sql Server数据库名称

    错误: 消息 5030,级别 16,状态 2,第 1 行无法用排他锁锁定该数据库,以执行该操作. 解决方法:(原理一样) 1.将数据库设置为单用户模式 (单用户模式指定一次只有一个用户可访问数据库,该 ...

  10. 递推DP URAL 1009 K-based Numbers

    题目传送门 题意:n位数,k进制,求个数分析:dp[i][j] 表示i位数,当前数字为j的个数:若j==0,不加dp[i-1][0]; 代码1: #include <cstdio> #in ...