Bootstrap教程:响应式/圆角/圆形/缩略图图像设置

Bootstrap在网页制作中图像也是经常用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

使用方法：

使用方法非常简单，只需要在<img>标签上添加对应的类名，如下代码：

<img alt="140x140" src="http://placehold.it/140x140"> 
<img class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> 
<img class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

响应式图片

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。

.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：

<div class="container">
	<h2>响应式图片</h2>
	<p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p>                  
	<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="500" height="236"> 
</div>

设置图片大小：

由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）

注意：

对于圆角图片和圆形图片效果，因为是使用了CSS3的圆角样式来实现的，所以注意对于IE8以及其以下版本不支持，是没有圆角效果的。

Bootstrap框架为了大家更好的维护图像的样式，同样将这部分样式独立出来：
1、LESS版本，可以查阅scaffolding.less
2、Sass版本，可以查阅_scaffolding.scss
大家可以修改其中之一，重新编译就可以得到自己需要的图片样式效果。