Bootstrap 框架為圖片提供了一些預(yù)設(shè)的樣式類，以幫助開發(fā)者輕松地對圖片排版。本教程展示了如何讓圖片支持響應(yīng)式行為（這樣它們就不會超出父元素的范圍）以及如何通過類（class）添加些許樣式。

一、響應(yīng)式圖片

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

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

二、SVG圖片和IE瀏覽器

在 Internet Explorer 10 和 11 中，添加 .img-fluid 類的 SVG 圖片的尺寸比例是錯(cuò)誤的。要解決此問題，請?jiān)诒匾獣r(shí)添加 width: 100%; 或 .w-100。此修復(fù)方法無法正確調(diào)整其它圖片格式的尺寸，因此 Bootstrap 不會自動(dòng)開啟此方法。

三、圖片縮略圖

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

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

四、對齊圖片

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

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

如果使用 <picture> 元素為某個(gè) <img> 指定多個(gè) <source> 元素的話，請確保將 .img-* 類添加到 <img> 元素而不是 <picture> 元素上。

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