圖片（Images）

本文檔及示例展示了如何讓圖片支持響應式行為（這樣它們就不會超出父元素的范圍）以及如何通過類（class）添加些許樣式。

On this page

響應式圖片

通過 Bootstrap 所提供的.img-fluid 類讓圖片支持響應式布局。其原理是將max-width: 100%; 和 height: auto; 賦予圖片，以便隨父元素一起縮放。

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

圖片縮略圖

除了我們提供的 border-radius utilities 外，你還可以使用.img-thumbnail 使圖片的外觀具有 1px 寬度的圓形邊框。

<img src="..." class="img-thumbnail" alt="...">

對齊圖片

通過使用 helper float classes 或 text alignment classes 將圖片對齊。塊級（block-level）圖片可以使用 .mx-auto通用類居中對齊。

<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> 元素為某個 <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;