响应式 - 基于宽度百分比的图像缩放

前言

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

 

准备工作

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

该图像应该能够缩放以适配最大尺寸的可视区域。打开图像编辑软件。如果并未安装此类软件，也会有众多的免费图像编辑软件供你选择。Gimp便是其中之一，它是一款功能强大的开源图片编辑软件，因此下载是完全免费的。访问www.gimp.org即可获取。

 

实现方式

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

为了展示响应式特效，需要在HTML中嵌入图像和一些文字说明。如果没有足够的时间来阐述你的人生经历，没有关系，回到互联网并通过Ipsum生成器来得到一些文本样本。访问www.lipsum.com即可获取Ipsum文本段落。

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

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

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

下载示例代码

登录www.packtpub.com可以下载通过你的账户所购买的所有Packt书籍的示例源码。如果是通过其他途径购买的本书，访问www.packtpub.com/support，完成注册即可通过电子邮件获取源码。

 

工作原理

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