《响应式Web设计：HTML5和CSS3实践指南》——1.5节基于媒介查询的图像缩放

本节书摘来自华章社区《响应式Web设计：HTML5和CSS3实践指南》一书中的第1章，第1.5节基于媒介查询的图像缩放，作者（美）　Benjamin LaGrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

1.5　基于媒介查询的图像缩放
媒介查询是针对响应式图像的另一个有用和高度可定制的方法。这与通过设置宽度百分比来实现自适应宽度的方法并不相同。你的设计可能需要为不同的屏幕尺寸范围准备一些具体的图像宽度，而自适应宽度会打破你的设计。

1.5.1　准备工作
这种方式仅仅需要一张图像。而且在客户端浏览器调整图像，而不是在服务器端。

1.5.2　实现方式
HTML代码相当简单，使用标准的图像标签创建一个图像元素，如下所示：

将CSS中的这个类添加到每个媒介查询中，所对应设置的尺寸都不相同。这将会使浏览器针对每个不同的尺寸窗口渲染所需的图像大小。媒介查询可与其他CSS类共存。接着，添加一个独立于媒介查询的CSS的类属性，设置图像属性为height:auto。这样只需添加一行CSS即可对两个媒介查询都起作用。

通过媒介查询方法便可实现针对多个不同的浏览器窗口尺寸设置对应的图像尺寸。

1.5.3　工作原理
CSS3媒介查询在CSS中通过逻辑条件将浏览器依据窗口属性进行区分，并基于此来完成不同样式的渲染。该方法正是利用这一点来对不同的浏览器窗口尺寸设置一个不同的图像宽度。这提供了响应式的图像尺寸，因此你可以进行高粒度级别的控制。