View on GitHub

图片

文档和示例，用于将图像选择为响应行为（因此它们永远不会比其父元素大），并通过类向它们添加轻量级样式。

响应式图片

Bootstrap 的图像使用 .img-fluid进行响应。 max-width: 100%; 和 height: auto; 应用于图像，使其随父元素缩放。

PlaceholderResponsive image 
<img src="..." class="img-fluid" alt="...">
SVG图像和IE浏览器

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

图片缩略图

除了我们的 border-radius 实用程序外，您还可以使用 .img-thumbnail使图像具有 1px 的圆形边界外观。

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

对齐图片

将图像与 助手浮动类 或 文本对齐类对齐。 block级图像可以使用 .mx-auto 边距实用程序类居中。

Placeholder200x200 Placeholder200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Picture

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

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