图片

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

响应式图像

Bootstrap中的图像通过.img-fluid响应。 max-width：100％;和height：auto;应用于图像，以便它与父元素一起缩放。

<img src="..." class="img-fluid" alt="Responsive image">

在Internet Explorer 10中，带有“.img-fluid”的SVG图像的大小不成比例。要解决这个问题，请在必要时添加width：100％\ 9;。此修复程序不正确地调整其他图像格式的大小，因此Bootstrap不会自动应用它。

图像缩略图

除了我们的[border-radius utilities]（{{site.baseurl}} docs {{site.docs_version}}实用程序边框）之外，您还可以使用.img-thumbnail为图像提供圆形的1px边框外观。

<img src="..." alt="..." class="img-thumbnail">

对齐图像

使用[辅助浮点类]（ {{ site.baseurl }} docs {{site.docs_version}} utilities float）或[text alignment classes]（{{site.baseurl}} docs {{site.docs_version}}对齐图像实用程序文本#text-alignment）。 block级图像可以使用[.mx-auto` margin utility class]（{{site.baseurl}} docs {{site.docs_version}}实用程序间距＃horizo​​ntal-centering）居中。

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<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>