HTML5 viewport 标签与 CSS3 background-size 属性使图片完全适应区域内容

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

要使一张图片不论在移动端还是在桌面端都能适应区域内容，可以使用 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 下查看页面如图：