F2E合作社｜圖片與寬高尺寸控制｜Bootstrap 5網頁框架開發入門

前言

如果網頁裡只有文字，嗯⋯⋯也許有人能接受啦，但我本身就是對小說很還好的人，圖文並茂的內容比較能讓我看下去哈哈哈，如果你跟我一樣，那一定覺得圖片在網頁中也有很大的重要性吧，而 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 。