圖片

文件和範例，說明如何讓圖片採用回應式行為（因此它們永遠不會大於其父元素），並透過類別為它們新增輕量級樣式。

回應式圖片

Bootstrap 中的圖片使用 .img-fluid 讓圖片具備回應式。max-width: 100%; 和 height: auto; 會套用至圖片，讓圖片隨著父元素調整大小。

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

在 Internet Explorer 10 和 11 中，具有 .img-fluid 的 SVG 圖片大小會不成比例。若要修正這個問題，請在必要時新增 width: 100%; 或 .w-100。此修正會讓其他圖片格式大小不正確，因此 Bootstrap 沒有自動套用它。

除了我們的邊框圓角工具之外，您還可以透過 .img-thumbnail 為圖片新增 1px 的圓角邊框。

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

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

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" 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>