《响应式Web图形设计》一13.1　缩放图像和媒体

本节书摘来异步社区《响应式Web图形设计》一书中的第13章，第13.1节，作者： 【美】Christopher Schmitt 译者： 曾斌 责编： 赵轩，更多章节内容可以访问云栖社区“异步社区”公众号查看。

13.1　缩放图像和媒体

响应式Web图形设计
因为我们调整设计来适应不同的设备，所以同样需要对图像一些调整：改变大小。然而，基于网格的图像格式只能够保存固定高和宽的图像。

多亏了CSS，我们可以对图像进行缩放，以便应用于响应式设计。图像被过度拉伸，超过实际尺寸时会失真，因此我们要先将图像的max-width（最大宽度）属性设置为100%：

img{ 
 max-width:100%;
 height:auto;
}

在图13.1中，我们在左、右两栏放置了相同的600×600像素的小猫图像。由于图像宽度比左栏宽度小，因此呈现效果还不错。但是，右侧的图像比右栏宽，这时我们需要使用CSS规则，将图像缩小，同时保持高宽比不变。

我们可以对视频使用同样的方法。在img元素的CSS规则选择器处添加video选择器（同时为Flash视频添加object）:

img, video, object {
 max-width: 100%;
 height: auto;
}

背景图并非如此

这里我们特别讨论一下网页内容中的图像——内嵌图像。用CSS设置为HTML元素背景图的图像，通过使用媒体查询可以很容易地根据情境使用。内嵌图像可做不到。