要使一张图片不论在移动端还是在桌面端都能适应区域内容，可以使用 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 屏幕尺寸下的效果如图：
时间： 2024-11-05 16:25:34