《响应式Web设计：HTML5和CSS3实践指南》——1.2节基于宽度百分比的图像缩放

本节书摘来自华章社区《响应式web设计：html5和css3实践指南》一书中的第1章，第1.2节基于宽度百分比的图像缩放，作者（美）　benjamin lagrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

1.2　基于宽度百分比的图像缩放

本方法依赖于客户端编码来完成对于大图像的缩放功能。客户端只需单张图像来依据浏览器的窗口大小呈现图像。如果对于客户端的网络带宽有足够的信心，确信该操作不会使得页面加载变慢，那么本方法是比较可行的。

1.2.1　准备工作

毫无疑问我们需要一张图像。使用google的图像搜索来获取一张高分辨率的图像。例如，搜索 robots，将会得到158 000 000条记录，还不错的结果。但是想要的是一张大尺寸的图像，因此单击search tools选项，然后将any size选项改为large。可以看到依然有4 960 000张图片可供选择。

1.2.2　实现方式

通过图像编辑工具打开想要编辑的图像并且将其宽度设置为300px。保存编辑后的新图像，然后移动或者上传到你的web应用所对应的资源文件夹中。

在css文件中需要为文本段落、图像及图像包装器（wrapper）分别设置相应的类属性。文本段落设置为向左浮动，同时宽度为60%，图像包装器（wrapper）的宽度则为40%。

现在的布局方式为流式布局（fluid layout），但是响应式的图像效果依然不见踪影。目前的图像仍然是静态的，宽度依旧为300px。但是当添加了下面的css配置后，一切都会改变。为图像添加一个新的类，设置max-width属性值为100%。这会使得图像的宽度适应浏览器宽度的改变。接下来，将height属性设置为可动态变化的值。

到目前为止，经过优化并可以适应浏览器窗口大小改变的图片就已经呈现在读者眼前了。

下载示例代码

1.2.3　工作原理

设置在css中图像元素的responsive属性会强制该元素100%占据其父元素的空间。当父元素的宽度改变时，图像元素也会相应改变并填充对应的宽度。而属性height: auto的作用在于保证图像自身的高宽比例不会发生变化。