跳到主要内容 跳到文档导航

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

响应式图片

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

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

图片缩略图

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

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera200x200
HTML
<img src="..." class="img-thumbnail" alt="...">

对齐图片

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

Placeholder200x200 Placeholder200x200
HTML
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder200x200
HTML
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder200x200
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);