Question

在现代浏览器（包括IE 7＋）中要实现图片随着流动布局相应缩放非常简单。只需在CSS中作如下声明：

这样就可以使图片自动缩放到与其容器100%匹配。更进一步，可以将同样的样式应用到其他多媒体标签上。如：

这些多媒体元素都可以自动缩放了。但是，对于采用的<iframe>显示视频的网站（比如YouTube），这个技术还不行，我们会在第4章解决这个问题。眼下，还是专注于图片的缩放问题吧，因为不论何种多媒体元素，原理都是相通的。

使用这种方法有几个需要斟酌的问题。第一，要提前准备一张足够大的图片，以备大视口使用。但这也就引出了第二个，同时也是非常重要的问题，即无论视口多大，什么设备，都得下载超大图片。可能对某些设备来说，图片大小只要原始图片的25%就好了。另外，在某些情况下，你还不得不因此而考虑带宽限制。我们呆会儿再说第二个问题，先把图片缩放问题说完。

3.5.1　让图片随视口缩放

示例网站的侧边栏有一组电影海报，其中两部是好电影，两部是烂电影（不在此处讨论这个话题）。对应的标签结构如下：

尽管我在CSS文件中给img元素追加了max-width： 100%声明，但是没看到什么变化，图片没有按我预想的方式随着视口变化而变化：

原因是我在标签中指定了图片的宽度和高度：

又犯了一个低级错误！修改对应的图片标签，删除宽度和高度属性：

刷新浏览器看看修改的效果：

修改确实起效了！但却引入了另外一个问题。因为图片被缩放至其包裹元素宽度的100%，所以每张图片都填满了侧边栏。同样，解决这个问题的方法有很多……

3.5.2　为特定图片指定特定规则

可以像下面代码所示的那样给每个图片追加一个额外的class：

然后，为其宽度设置一个特定的规则。另外，我们还可以保留图片标签不变，利用CSS规则的针对性，用一个更具体的规则覆写侧边栏图片已有的max-width样式：

下图展示了侧边栏当前的显示效果：

这种利用CSS规则针对性的方法，也可以用来控制其他图片或多媒体元素的宽度。第5章会介绍CSS3选择器的强大威力，它能让我们不追加任何多余标签，或是不引入任何JavaScript框架（如jQuery），直接指向页面任意元素，来完成我们的苦活累活。

我给侧边栏图片设置的宽度是45%，因为图片之间需要一点间距，所以两张图片宽度加起来是90%，给我留出了一点余地（10%）。

现在侧边栏图片终于完美显示了，我准备将奥斯卡雕像图片的标签中的宽度和高度也删除掉。但是，除非我为其设置一个百分比宽度，否则它还是不会自动缩放；所以我再次使用我们值得信赖的公式来为其设置一个百分比宽度。

3.5.3 给弹性图片设置阈值

现在图片可以随着视口的伸缩而缩放了。但是如果将视口拉大，直到图片拉伸至超出其原始尺寸，那问题就麻烦了。看看下图所示的1900像素宽的视口中奥斯卡图片的显示效果：

oscar.png图片的实际宽度是202像素。但在超过1900像素宽的视口中，图片也被拉大了，其显示宽度超过了300像素。我们可以通过追加另一个特定样式来为图片设置阈值：

这样就可以保证oscar.png按照通用的图片样式自由缩放，但又绝不会超出max-width属性设置的最大上限。下图展示了给图片设置上限之后的页面效果：

3.5.4　超级全能的max-width属性

另一种限制页面无限制扩张的方法是给最外层的#wrapper div设置max-width属性，如下所示：

这样意味着页面会缩放至视口宽度的96%，但绝不会超过1414像素宽（设置为1414像素，是因为在这个宽度下大多数浏览器恰好能剪切出完整的角旗，而不会留个半边）。下图展示了视口宽度1900像素下的页面效果：

显然这些方法仅是备用选项。但它证明了流动布局的灵活性，也说明了如何通过几个特定声明来控制文档流。