图片

给图片增加响应式行为（因此它们永远不会变得比它们的父更宽）的文档和示例，并通过类向它们添加轻量级样式。

在本页

响应式图片

Bootstrap 中的图片通过.img-fluid增加响应式. 这适用于图片max-width: 100%;，height: auto;以便它随父级宽度缩放。

HTML

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

图片缩略图

除了我们的border-radius 实用程序，您还可以使用.img-thumbnail来为图片提供圆角的 1px 边框外观。

HTML

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

对齐图片

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

HTML

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

HTML

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

HTML

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

Sass

变量

变量可用于图片缩略图。

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      var(--#{$prefix}body-bg);
$thumbnail-border-width:            var(--#{$prefix}border-width);
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           var(--#{$prefix}border-radius);
$thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm);