Question

Bootstraps优化图片，添加了响应式的行为（因此它们绝不会大过其父元素），并通过样式类给它添加轻量级的样式。

响应式图片

在 Bootstrap 中，给图片应用.img-reponsive类以及 max-width: 100%、height:auto; 样式，使其具有响应性，并根据父元素的大小缩放。

<img src="..." class="img-responsive" alt="Responsive image">

SVG图片以及 IE 9-10

在IE9和IE10浏览器中，带着.img-responsive类的SVG图片是尺寸不均称的。为了修正它，在必要的地方添加width: 100% \9属性。由于它会导致其它图片格式的混乱，所以Bootstrap没有自动应用它。

图片形状

向一个<img>元素添加类，轻松地在项目中样式化图片。

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

对齐图片

使用浮动助手类或者文本对齐类可以实现图片对齐。一个简单的居中类也可以用在block块级图片上。

<img src="..." class="img-rounded pull-left" alt="...">
<img src="..." class="img-rounded pull-right" alt="...">

居中对齐

<img src="..." class="img-rounded center-block" style="display: block;" alt="...">

<div class="text-center">
  <img src="..." class="img-rounded" alt="...">
</div>