在本教程中，我们将学习在Bootstrap中设置图像样式。

图片是任何的重要组成部分。
它们增加色彩并为我们提供可视数据。

<p>"A picture is worth a thousand words"
</p>

响应式图像

为了使图像响应，我们在img标签中添加了" .img-sensitive"类。

这会将以下样式属性应用于图像，以使其很好地缩放到父元素。

max-width: 100%;
height: auto;
display: block;

<img class="img-responsive" src="/path/to/image.png">

例：

没有.img-sensitive类的图片。
您会看到图像移到第一图像太远，因此与侧边栏合并。

与.img-sensitive类相同的图像。
这看起来很完美。

居中

我们可以使用.center-block类来居中图像。

<img class="img-responsive center-block" src="/path/to/image.png">

图片形状

我们可以使用以下类使图像成形。

请记住，Internet Explorer 8缺少对圆角的支持。

<img src="/path/to/image.png" alt="sample-image" class="img-rounded">
<img src="/path/to/image.png" alt="sample-image" class="img-circle">
<img src="/path/to/image.png" alt="sample-image" class="img-thumbnail">