响应式图片
Bootstrap 中的图像通过 .img-fluid 实现响应式。这会将 max-width: 100%; 和 height: auto; 应用于图像，使其随父元素宽度缩放。
<img src="..." class="img-fluid" alt="...">图片缩略图
除了我们的边框圆角工具之外，你还可以使用.img-thumbnail来给图片一个圆角 1px 边框的外观。
<img src="..." class="img-thumbnail" alt="...">对齐图像
将图像与辅助浮动类或文本对齐类对齐。block级图像可以使用.mx-auto边距工具类居中。
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="..."><img src="..." class="rounded mx-auto d-block" alt="..."><div class="text-center">
<img src="..." class="rounded" alt="...">
</div>图表
每当你需要显示一段内容——例如带可选标题的图像时，请考虑使用 <figure> 元素。Figure 在 Bootstrap 中是弹性容器，因此你可以使用我们的 弹性工具 轻松修改布局和对齐方式。
使用包含的 .figure 和 .figure-caption 类为 HTML5 <figure> 和 <figcaption> 元素提供一些基础样式。图中的图片没有明确的大小，因此一定要将 .img-fluid 类添加到你的 <img> 以使其具有响应性。
<figure class="figure">
<img src="..." class="img-fluid rounded-3" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>以及反向对齐：
<figure class="figure align-items-end">
<img src="..." class="img-fluid rounded-3" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>图片
如果你正在使用 <picture> 用于指定多个的元素 <source> 特定的元素 <img>，确保添加 .img-* 到课程 <img> 而不是给 <picture> 标签。
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
CSS
变量
图像在.img-thumbnail上使用本地 CSS 变量进行实时自定义。CSS 变量的值由每个组件独有的 Sass map生成，并应用于上述类。
// stylelint-disable-next-line scss/dollar-variable-default
$thumbnail-tokens: defaults(
(
--thumbnail-padding: .25rem,
--thumbnail-bg: var(--bg-body),
--thumbnail-border-width: var(--border-width),
--thumbnail-border-color: var(--border-color),
--thumbnail-border-radius: var(--radius-5),
--thumbnail-box-shadow: var(--box-shadow-sm),
),
$thumbnail-tokens
);
以及用于数字：
// stylelint-disable-next-line scss/dollar-variable-default
$figure-tokens: defaults(
(
--figure-gap: calc(var(--spacer) * .5),
--figure-caption-font-size: var(--font-size-sm),
--figure-caption-color: var(--fg-3),
),
$figure-tokens
);