Images

将图像选择为响应式行为的文档和示例（这样它们就永远不会变得比父图像更宽），并为它们添加轻量级样式——所有这些都是通过类实现的。

On this page

响应式图像

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="...">

对齐图像

将图像与helper float classes 或text alignment classes对齐。 block-level 图像可以使用.mx-auto margin 工具集类居中。

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

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

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

CSS

Sass variables

变量可用于图像缩略图。

scss/_variables.scss

$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);