图片（Images）

本文档及示例展示了如何让图片支持响应式行为（这样它们就不会超出父元素的范围）以及如何通过类（class）添加些许样式。

On this page

响应式图片

通过 Bootstrap 所提供的.img-fluid 类让图片支持响应式布局。其原理是将max-width: 100%; 和 height: auto; 赋予图片，以便随父元素一起缩放。

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

图片缩略图

除了我们提供的 border-radius utilities 外，你还可以使用.img-thumbnail 使图片的外观具有 1px 宽度的圆形边框。

一个普通的方形占位符图像，周围有白色边框，使其看起来像是一张照片,一个旧的即时照相机 200x200 
<img src="..." class="img-thumbnail" alt="...">

对齐图片

通过使用 helper float classes 或 text alignment classes 将图片对齐。块级（block-level）图片可以使用 .mx-auto通用类居中对齐。

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<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:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;
返回顶部