Skip to main content Skip to docs navigation
View on GitHub

Images图像

Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.文档和示例，用于将图像选择为响应行为（因此它们永远不会比其父元素大），并通过类向其添加轻量级样式。

On this page本页内容

Responsive images响应图像

Images in Bootstrap are made responsive with .img-fluid. Bootstrap中的图像使用.img-fluid进行响应。This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.这在图像上应用了max-width: 100%;和height: auto，以使其与父元素一起缩放。

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

Image thumbnails图像缩略图

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.除了我们的边界半径实用程序外，您还可以使用.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 
<img src="..." class="img-thumbnail" alt="...">

Aligning images对齐图像

Align images with the helper float classes or text alignment classes. 使用辅助浮动类或文本对齐类来对齐图像。block-level images can be centered using the .mx-auto margin utility class.块级图像可以使用.mx-auto边距实用程序类居中。

Placeholder200x200 Placeholder200x200 
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder200x200 
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>

Picture图画

If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .img-* classes to the <img> and not to the <picture> tag.如果你针对特定的<img>使用<picture>元素来指定多个<source>元素，请确保是给<img>添加.img-*类，而不是给<picture>标签添加这些类。

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

Sass

Variables变量

Variables are available for image thumbnails.变量可用于图像缩略图。

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;