《响应式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元素背景图的图像，通过使用媒体查询可以很容易地根据情境使用。内嵌图像可做不到。

下一代响应式Web设计：组件驱动式Web设计 自从著名设计师 Ethan Marcotte（@beep）在 A List Apart上发表了一篇名为《 Responsive Web Design》的文章之后，响应式网页设计（RWD，即 Responsive Web Design）的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来，CSS 也发生了巨大的变化，新增了很多新的特
推荐这几个流程图设计器web开发方案 前沿：一个流程图设计器需要什么？一个是图的绘制能力、基于svg或者canvas来绘制各种形状的节点（矩形、圆形、多边形）以及线，一个是图与图之间的交互包括拖拽，节点之间的连线等，最后是画布面板的便捷性，其中包括：比如ps中的网格功能、对其线、步骤回撤、画布的可伸缩、快捷按钮等等，那前端社区有啥开源解决方案，方便我们快速开发一个属于自己的流程图设计器？
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。