玩过响应式设计的同学或多或少都会在一些媒体上纠结，比如说图片，视频等自适应问题。而且有关于这方面的解决方案各有各的说法，似乎是没有一种方案是绝佳的，这样一来让人倍感头痛。这或许就是前端的烦恼吧。

我也一样，虽然整响应式设计蛮久的了，但对于图片方面的自适应处理还真没有找到一个好的方案，这回痛下决心，仔细找了一些相关教程阅读了一回。那么今天将整理一下，网络上有关于图片自适应（此处我称之为弹性图片Flexible Images）解决方案，希望这篇文章能帮助大家解决图片在响应式设计中给大家带来的烦恼。

模板

假设我们有一个两栏自适应的布局，在主内容中应用了一个图片，其结构如下：

<div class="figure">
  <div class="inner">
    <img src="//w3cplus-cdn2.u.qiniudn.com/sites/default/files/blogs/2014/1401/flexible-image.jpg" alt="" /> 
    <p class="figcaption">Lo, the robot walks</p>
  </div>
</div>

这是一个很常见的结构，其效果就是一张图片，图片下面有一个简单的文本描述。在整个效果中，针对figure内元素写了一点样式

//SCSS
.figure {
  float: right;
  margin: 0.5em 0;
  margin-left: 1.9672131%;  //12px/610px 
  width: 45.9016393%;  // 280px/610px

  .inner {
    border: 10px solid hsla(333,50%,60%,.8);
    border-radius: 10px;
  }
  img {
    vertical-align: top;
  }

  p {
    background-color: hsla(333,50%,60%,.8);
    padding: 10px 10px 0;
    color: #fff;
  }
}

从上面的代码中我们可以想像出我们要的效果，figure占整个容器.content宽度的"45.9016393%"也就是"280px/610px"。虽然整个布局是自适应布局，但图片依旧撑破容器：

这并不是我们想要我效果，我们真正想要达到的效果应该是这样的，换句话说理想中要的将是下图的效果：

那接下来，我们观注的就是，如何让我们的效果达到上图所示的效果。

方案一：max-width

在介绍响应式设计的文章中，为了解决图片的自适应问题，都会提到使用max-width。Richard Rutter设计首先提出使用max-width的方案：

img {
    max-width: 100%;
}

在上面的示例基础上，我们为img添加max-width值为“100%”：

更重要的是，在现代浏览器中发展到可以自动调整图像的比例，可以根据容器的大小缩放或者放大图像，并且图像的宽高比保持不变。

max-width:100%除了可以应用于自适应元素容器上之外也可以应用于固定元素容器上。而且可以应用于视频和其他富媒体上也具有同等的效果。

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

不幸的是，max-width属性在IE7以及其以下版本并无法支持。

如果你需要兼容这些浏览器，你要考虑使用Javascript或者IE滤镜来处理。

另外一点，在一些浏览器中仅指定图片的宽度，可能会导致浏览器重新处理布局，调整页面的时间周期会增加两到三倍，虽然周期不到一毫秒，但是累积起来，尤其是页面上有很多个这样的元素的时候，还是或多或少会影响页面的性能。为了解决这个问题，可以显式的指定图片的height值为auto：