在响应式Web设计的思路中，一个重要的因素是如何正确处理图片大小问题。
首先，应该设置图片具有弹性能力。弹性图片的设计思路是，无论何时，确保在图片原始宽度范围内，以最大的宽度同比完整地显示图片。我们不必在样式表中为图片设置宽度和高度，只需要让样式表在窗口尺寸发生变化时，辅助浏览器对图片进行缩放。
有很多同比缩放图片的技术，其中有不少是简单易行的，比较流行的方法是使用CSS的max-width属性。
img {
max-width: 100%;
}
只要没有其他涉及图片宽度的样式代码覆盖上面的样式，且容器可视部分的宽度小于图片的原始宽度，那么页面上所有的图片就会以其原始宽度进行加载。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应地减小，图片本身永远不会被容器边缘隐藏或覆盖。
老版本的IE不支持max-width，可以对其单独设置为：
img {
width: 100%;
}
此外，在Windows平台上缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img {
-ms-interpolation-mode: bicubic;
}
或者，使用Ethan Marcotte开发的专用插件imgSizer.js（http://unstoppablerobotninja.com/demos/resize/imgSizer.js）。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
如果有条件的话，最好能够根据屏幕的不同大小，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
图片本身的分辨率、加载时间是另外一个需要考虑的问题。虽然通过上面的方法，可以很轻松地缩放图片，确保图片在移动设备的窗口中可以被完整浏览，但如果原始图片过大，便会显著降低图片文件的下载速度，对存储空间也会造成不必要的消耗。这个话题将在3.4.3节进行介绍。
要实现图片的智能响应，应该解决两个问题：自适应图片缩放尺寸，以及在小设备上自动降低图片的分辨率。
为此，Filament Group提供了一种解决方案，这个方案的实现需要配合使用两个相关文件：rwd-images.js和.htaccess，读者可以在Github上获取（https://github.com/filamentgroup/Responsive-Images），具体使用方法可以参考Responsive Images的说明文档（https://github.com/filamentgroup/Responsive-Images#readme）。
Responsive Images的设计原理是：使用rwd-images.js文件检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面头部区域添加Base标记，并将后续的图片、脚本和样式表加载请求定向到虚拟路径"/rwd-router"。当这些请求到达服务器端，.htaccess文件会决定这些请求所需要的是原始图片还是小尺寸的响应式图片，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会用到。
该技术支持大部分现代浏览器，如IE8（及以上版本）、Safari、Chrome和Opera，以及这些浏览器的移动设备版本。在Firefox及一些旧浏览器中，仍可得到小图片的输出，但同时也会下载原始大图。
例如，使用不同的设备访问页面http://filamentgroup.com/examples/responsive-images/就会发现，不同设备中所显示的图片分辨率是不同的，如图3-23所示。
提示 在iPhone、iPod Touch中，页面会被自动地同比例缩小至最适合屏幕大小的尺寸，x轴不会产生滚动条，用户可以上下拖拽浏览全部页面，或在需要的时候放大页面的局部。这里会产生一个问题，即使使用响应式Web设计的方法，专门为iPhone输出小图片，它同样会随着整个页面一起被同比例缩小，如图3-24左图所示。
针对上面的问题，可以使用苹果公司的专有meta标签来解决。在页面的<head>部分添加以下代码：
<meta name="viewport" content="width=device-width; initial-scale=1.0">
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例为1.0（initial-scale=1），即网页初始大小占屏幕面积的100%。更多关于viewport meta标签的用法，可以参考苹果公司官方文档（http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safarihtmlref/
Articles/MetaTags.html）。
