本节书摘来异步社区《响应式Web图形设计》一书中的第13章，第13.1节，作者： 【美】Christopher Schmitt 译者： 曾斌 责编： 赵轩，更多章节内容可以访问云栖社区“异步社区”公众号查看。
响应式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元素背景图的图像，通过使用媒体查询可以很容易地根据情境使用。内嵌图像可做不到。
相关资源：C#编程经验技巧宝典