Bootstrap图像形状
圆角：
圈：
缩略图：
圆角
该.img-rounded类添加圆角到图像（IE8不支持圆角）：
圈
该.img-circle一流的形象塑造为一个圆（IE8不支持圆角）：
缩略图
该.img-thumbnail级塑造形象，以缩略图：
例
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> 试一试» 响应图片
图片来自于所有尺寸。 所以，做屏幕。 响应图像自动调节以适应屏幕大小。
通过添加创建响应图像.img-responsive类的<img>标签。 然后图像会很好地扩展到父元素。
该.img-responsive类应用display: block; 和max-width: 100%; 和height: auto; 到图像：
图片廊
你也可以用Bootstrap's网格系统会同.thumbnail类来创建一个图片库：
例
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit
Rock" style="width:150px;height:150px">
</a>
</div>
<div
class="col-md-4">
<a href="moustiers-sainte-marie.jpg"
class="thumbnail">
<p>Moustiers-Sainte-Marie:
Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"
style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of
Italy.</p>
<img src="cinqueterre.jpg"
alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div> 试一试» 响应嵌入功能
也让视频或幻灯片的比例适当的任何设备上。
类可以直接应用到<iframe>, <embed>, <video>和<object>元素。
下面的例子通过添加创建一个响应视频.embed-responsive-item类的<iframe>标记（则视频将很好地扩展到父元素）。 包含<div>定义视频的长宽比：
例
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> 试一试» 什么是宽高比？
图像的宽高比描述其宽度和高度之间的比例关系。 两种常见的视频宽高比为4：3（20世纪的通用的视频格式），和16：9（万能高清电视，再到欧洲数字电视）。
您可以在两种宽高比类之间进行选择：
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>自测练习用！
完整的Bootstrap图像参考
对于所有的图像类的完整参考，请访问我们完整的Bootstrap图像参考 。