圖片

用於選擇影像以進行回應行為（因此它們永遠不會比其父項寬）並為它們新增輕量級樣式的文件和範例，所有這些都透過類別進行。

在此頁面上

回應式影像

Bootstrap 中的影像使用 .img-fluid 進行回應。這會將 max-width: 100%; 和 height: auto; 套用至影像，以便它隨著父項寬度調整大小。

html

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

影像縮圖

除了我們的邊框半徑公用程式之外，您還可以透過 .img-thumbnail 來讓影像呈現圓角 1px 的邊框外觀。

html

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

對齊影像

使用輔助浮動類別或文字對齊類別對齊圖片。區塊級別的圖片可以使用.mx-auto邊界輔助類別置中。

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>元素為特定的<img>指定多個<source>元素，請務必將.img-*類別新增到<img>，而不是<picture>標籤。

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

CSS

Sass 變數

圖片縮圖有提供變數。

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