圖片（Images）

讓圖片採用響應式行為（使其永不超過父元素寬度）並透過類別為其新增輕量樣式的文件與範例。

本頁內容

響應式圖片（Responsive images）

Bootstrap 中的圖片透過 .img-fluid 變成響應式。這會對圖片套用 max-width: 100%; 和 height: auto;，使其隨父元素寬度縮放。

html

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

圖片縮圖（Image thumbnails）

除了我們的圓角邊框通用類別之外，您還可以使用 .img-thumbnail 為圖片提供圓角 1px 邊框外觀。

html

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

對齊圖片（Aligning images）

使用輔助浮動類別或文字對齊類別來對齊圖片。block 級別的圖片可以使用 .mx-auto margin 通用類別來置中。

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

如果您使用 <picture> 元素為特定的 <img> 指定多個 <source> 元素，請確保將 .img-* 類別加入到 <img> 而非 <picture> 標籤上。

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

CSS

Sass 變數（Sass variables）

圖片縮圖有可用的變數。

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