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 图片参考。