Bootstrap 图片
Bootstrap 图片形状
圆角
圆形
缩略图
圆角
.img-rounded 类为图片添加圆角（IE8 不支持圆角）
圆形
.img-circle 类将图片形状改为圆形（IE8 不支持圆角）
缩略图
.img-thumbnail 类将图片形状改为缩略图
响应式图片
图片有各种尺寸。屏幕也是一样。响应式图片会自动调整以适应屏幕尺寸。
通过在 <img> 标签中添加 .img-responsive 类来创建响应式图片。这样，图片就会按比例缩放以适应父元素。
.img-responsive 类将 display: block; 和 max-width: 100%; 以及 height: auto; 应用于图片
图片库
您还可以将 Bootstrap 的网格系统与 .thumbnail 类结合使用来创建图片库。
注意: 您将在本教程的后面学习有关网格系统的更多内容（如何使用不同数量的列创建布局）。
示例
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/lights.jpg">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/nature.jpg">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/fjords.jpg">
<img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
</div>
自己尝试一下 »
响应式嵌入
让视频或幻灯片也能在任何设备上按比例缩放。
类可以直接应用于 <iframe>、<embed>、<video> 和 <object> 元素。
以下示例通过在 <iframe> 标签中添加 .embed-responsive-item 类来创建响应式视频（这样，视频就会按比例缩放以适应父元素）。包含的 <div> 定义了视频的纵横比
示例
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
自己尝试一下 »
什么是纵横比？
图片的纵横比描述了其宽度和高度之间的比例关系。两种常见的视频纵横比是 4:3（20 世纪的通用视频格式）和 16:9（高清电视和欧洲数字电视的通用格式）。
您可以选择两种纵横比类之一
<!-- 16:9 纵横比 -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 纵横比 -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
自己尝试一下 »
Bootstrap 图片完整参考
有关所有图片类的完整参考，请访问我们的完整 Bootstrap 图片参考。
