前言
如果網頁裡只有文字，嗯⋯⋯也許有人能接受啦，但我本身就是對小說很還好的人，圖文並茂的內容比較能讓我看下去哈哈哈，如果你跟我一樣，那一定覺得圖片在網頁中也有很大的重要性吧，而 Bootstrap 針對圖片有訂定什麼通用類別呢？繼續看下去。
（ 圖片來源 ）
官方網站的 Images 頁面
下面有兩張圖片，分別是使用 img-fluid 和 w-100 ，如果要根據父容器的大小調整圖像的大小，我們可以添加 img-fluid ，如果只使用 width: 100％ 不但容易讓圖片失真出現問題，也沒辦法完成響應式的需求。
<div class="box">
<img src="https://picsum.photos/300/100?ramdom=10" class="img-fluid">
<img src="https://picsum.photos/300/100?ramdom=10" class="w-100">
</div>
而響應式圖片在不同的 Bootstrap 版本也是有不同的 class 名稱：
img-responsive 是自 Bootstrap3 起，而 img-fluid 從 Bootstrap4 到目前的 Bootstrap5 都是使用此名稱。
兩者的不同在於 img-fluid 讓響應式圖片的行為不取決於 display: block 。
.img-fluid {
max-width: 100%;
height: auto;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
另外我們還可使用 img-thumbnail 為圖片增加些許內距與邊框。
<div class="box">
<img src="https://picsum.photos/300/100?ramdom=10" class="img-thumbnail">
</div>
官方網站的 Figures 頁面
figure 這個區塊裡面的內容會獨立解讀，放置圖片再加上 figcaption 後， figcaption 的文字是在描述這張圖片。
Bootstrap 5 版本在 HTML 後增加標籤名稱， <figure> 裡面加上 class="figure" 、 <figcaption> 裡面加上 class="figcaption" 、 <img> 裡面加上 class="figure-img" 。
<figure class="figure">
<img src="https://picsum.photos/300/100?ramdom=10" class="figure-img">
<figcaption class="figcaption">
<p>這是內文啊!這是內文啊!這是內文啊!這是內文啊!這是內文啊!</p>
</figcaption>
</figure>
官方網站的 Sizing 頁面
相對於父層容器，寬度和高度支持 25% ， 50% ， 75% ， 100% ，和 auto 默認。
| 寬高／數值 | 25% | 50% | 75% | 100% | auto |
|---|---|---|---|---|---|
| width ( 寬 ) | w-25 | w-50 | w-75 | w-100 | w-auto |
| height ( 高 ) | h-25 | h-50 | h-75 | h-100 | h-auto |
在 CSS3 後有新增尺寸單位，在此還可以設置相對於視窗可視範圍的寬度和高度。
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>
對於視窗可視範圍（ viewport ）有不懂的，可以觀看 CSS保健室｜width、height 。
