Bootstrap 图片

Bootstrap 图片形状

圆角：

圆圈：

缩略图：

圆角

这个.img-rounded类为图片添加圆角（IE8不支持圆角）：

示例

亲自试一试 »

圆圈

这个.img-circleclass 将图片塑造为圆形（IE8 不支持圆角）：

示例

亲自试一试 »

缩略图

这个.img-thumbnail类将图片塑造为缩略图：

示例

亲自试一试 »

响应式图片

图片有各种尺寸。屏幕也是如此。响应式图片会自动调整以适应屏幕尺寸。

通过添加创建响应式图片.img-responsive类到<img>标签。然后图片将很好地缩放到父元素。

这个.img-responsive类别适用display: block;和max-width: 100%;和height: auto;到图片：

示例

亲自试一试 »

图片库

您还可以将 Bootstrap 的网格系统与.thumbnail类创建一个图片库。

Lorem ipsum donec id elit non mi porta gravida at eget metus。

笔记：您将在本教程后面了解有关网格系统的更多信息（如何创建具有不同列数的布局）。

示例

<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> 元素。

以下示例通过添加.embed-responsive-item类到<iframe>标签（视频将很好地缩放到父元素）。含有的<div>定义视频的宽高比：

示例

亲自试一试 »

什么是纵横比？

图片的纵横比描述了其宽度和高度之间的比例关系。两种常见的视频宽高比是 4:3（20 世纪的通用视频格式）和 16:9（高清电视和欧洲数字电视通用）。

您可以在两个宽高比类别之间进行选择：

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>


<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

亲自试一试 »

完整的 Bootstrap 图片参考

有关所有图片类别的完整参考，请访问我们的完整Bootstrap 图片参考。

你可知道？

W3.CSS 是 Bootstrap 的绝佳替代品。

W3.CSS 更小、更快且更易于使用。

如果您想学习 W3.CSS，请访问我们的W3.CSS教程。

码农教程 - 一技在手,衣食无忧!

Bootstrap 图片