在 GitHub 上查看

图像

用于选择图像以使其具有响应式行为（因此它们永远不会大于其父元素）并为其添加轻量级样式的文档和示例，所有这些都通过类实现。

响应式图像

Bootstrap 中的图像使用 .img-fluid 实现响应式。max-width: 100%; 和 height: auto; 应用于图像，以便它随父元素缩放。

Placeholder - Bootstrap 框架Responsive image 
<img src="..." class="img-fluid" alt="...">
SVG 图像和 Internet Explorer

在 Internet Explorer 10 和 11 中，带有 .img-fluid 的 SVG 图像大小不成比例。要解决此问题，请在必要时添加 width: 100%; 或 .w-100。此修复不正确地调整其他图像格式的大小，因此 Bootstrap 不会自动应用它。

图像缩略图

除了我们的 边框半径实用工具 之外，您还可以使用 .img-thumbnail 为图像提供圆角 1px 边框外观。

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera - Bootstrap 框架200x200 
<img src="..." class="img-thumbnail" alt="...">

对齐图像

使用 辅助浮动类 或 文本对齐类 对齐图像。可以使用 .mx-auto 边距实用工具类 将块级图像居中。

Placeholder - Bootstrap 框架200x200 Placeholder - Bootstrap 框架200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder - Bootstrap 框架200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder - Bootstrap 框架200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

图片

如果您使用 <picture> 元素为特定 <img> 指定多个 <source> 元素，请务必将 .img-* 类添加到 <img>，而不是添加到 <picture> 标记。

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>