用于选择图像进入响应式行为（因此它们永远不会变得比父级更宽）并为其添加轻量级样式的文档和示例——所有这些都通过类进行。
响应式图像
Bootstrap 中的映像通过 进行响应。这适用于图像，以便它与父宽度一起缩放。.img-fluidmax-width: 100%;height: auto;
<img src="..." class="img-fluid" alt="...">图像缩略图
除了我们的 border-radius 实用程序之外，您还可以使用该工具为图像提供圆角的 1px 边框外观。.img-thumbnail
<img src="..." class="img-thumbnail" alt="...">对齐图像
将图像与帮助程序浮点类或文本对齐类对齐。可以使用 .mx-auto margin 实用程序类将 -level 图像居中。block
<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>图片
如果您使用该元素为特定 指定多个元素，请确保将类添加到 而不是添加到标签中。<picture><source><img>.img-*<img><picture>
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
CSS系统
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);