在網頁設計中，圖片的顯示效果對用戶體驗至關重要。不同設備（手機、平板、電腦）的屏幕尺寸差異很大，如果圖片不做適配，可能會出現“溢出屏幕”“拉伸變形”或“加載緩慢”的問題。Bootstrap5通過一系列工具類，爲我們提供了簡單高效的響應式圖片解決方案。
一、什麼是響應式圖片？¶
響應式圖片的核心是讓圖片能根據屏幕寬度自動調整大小，既保證在小屏幕上清晰顯示，又不會在大屏幕上溢出容器。Bootstrap5的目標就是用最少的代碼實現這一點。
二、Bootstrap5響應式圖片的核心：.img-fluid類¶
最基礎也是最重要的響應式圖片工具是 .img-fluid 類。它的作用是：
- 讓圖片的寬度100%繼承父容器的寬度
- 高度自動按比例縮放，避免拉伸變形
- 移除圖片的默認邊距（即 display: block）
使用方法：只需給 <img> 標籤添加 .img-fluid 類即可。
<img src="your-image.jpg" class="img-fluid" alt="示例圖片">
關鍵點：圖片會“填滿”父容器的寬度，但不會超過父容器本身的大小。如果父容器是手機屏幕的寬度（比如用 .container 類），圖片就不會超出手機屏幕。
三、控制圖片容器與尺寸¶
.img-fluid 依賴父容器的寬度，所以需要先明確圖片的“容器大小”。通常用 Bootstrap 的佈局類（如 .container、.row、.col-*）來控制容器：
<!-- 用 .container 包裹圖片，確保圖片不會溢出 -->
<div class="container my-4">
<img src="your-image.jpg" class="img-fluid" alt="自適應容器的圖片">
</div>
.container類會自動根據屏幕寬度調整寬度（手機上更窄，電腦上更寬）.my-4是 Bootstrap 的邊距工具類，給圖片上下各加 1.5rem 的間距（可選）
四、圖片樣式美化：圓角、圓形、縮略圖¶
除了自適應，Bootstrap5還提供了快速美化圖片的工具類：
| 類名 | 效果 |
|---|---|
.rounded |
給圖片添加圓角（輕微弧度） |
.rounded-circle |
圓形圖片（適合頭像等） |
.img-thumbnail |
帶邊框和圓角的縮略圖（復古風格） |
示例：
<!-- 圓角圖片 -->
<img src="avatar.jpg" class="img-fluid rounded" alt="圓角頭像">
<!-- 圓形圖片 -->
<img src="logo.png" class="img-fluid rounded-circle" alt="圓形logo">
<!-- 縮略圖（帶邊框） -->
<img src="thumbnail.jpg" class="img-fluid img-thumbnail" alt="縮略圖">
五、圖片居中對齊¶
如果需要讓圖片在容器內居中（左右對齊屏幕中心），可以結合 Bootstrap 的對齊類：
<!-- d-block 讓圖片成爲塊級元素，mx-auto 自動左右居中 -->
<img src="center-image.jpg" class="img-fluid d-block mx-auto" alt="居中圖片">
六、保持圖片比例：.aspect-ratio類¶
有時 .img-fluid 會導致圖片比例失調（比如寬圖變瘦，或窄圖變高）。此時可以用 .aspect-ratio 類固定寬高比：
<!-- 固定爲16:9比例（常見視頻/寬圖比例） -->
<div class="aspect-ratio aspect-ratio-16x9">
<img src="wide-image.jpg" class="img-fluid" alt="16:9比例圖片">
</div>
- 常用比例：
aspect-ratio-4x3（4:3）、aspect-ratio-1x1（正方形）等 - 原理：
.aspect-ratio通過padding-top固定容器高度，從而保持圖片比例
七、進階：根據屏幕加載不同圖片（srcset）¶
如果需要更精細的圖片適配（比如手機加載小圖，電腦加載高清圖），可以使用 HTML5 的 srcset 和 sizes 屬性。Bootstrap5 支持原生 HTML 屬性，直接在 <img> 中添加即可：
<img
src="small.jpg"
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
class="img-fluid"
alt="智能加載圖片"
>
- srcset：告訴瀏覽器不同寬度的圖片地址（
400w表示圖片寬度400像素） - sizes：告訴瀏覽器在不同屏幕寬度下，圖片顯示的寬度（如手機屏幕用400px寬的圖片）
- 原理：瀏覽器會根據當前屏幕寬度自動選擇最合適的圖片加載，節省流量
八、常見問題與解決¶
-
圖片變形？
原因：圖片本身比例與容器比例不符。
解決：用.aspect-ratio固定寬高比，或調整圖片本身比例。 -
圖片太大導致加載慢？
解決：用工具類壓縮圖片，或結合srcset加載小分辨率圖片。 -
圖片溢出父容器？
解決：確保圖片父容器用了.container或自定義的固定寬度容器。
總結¶
Bootstrap5 響應式圖片的核心是 .img-fluid 類，配合以下工具可實現完美適配：
- 美化：.rounded、.rounded-circle、.img-thumbnail
- 居中：.d-block mx-auto
- 比例：.aspect-ratio
- 智能加載：srcset（進階）
通過這些簡單的類，無需寫複雜 CSS，就能讓圖片在手機、平板、電腦上都顯示得美觀且高效。
實戰示例：
<div class="container my-4">
<h5>響應式圖片示例</h5>
<!-- 居中圓形圖片（1:1比例） -->
<img
src="profile.jpg"
class="img-fluid d-block mx-auto rounded-circle"
alt="圓形頭像"
style="max-width: 200px;" <!-- 可選：限制最大寬度 -->
>
<!-- 16:9比例寬圖 -->
<div class="aspect-ratio aspect-ratio-16x9 my-4">
<img src="banner.jpg" class="img-fluid" alt="寬幅圖片">
</div>
</div>
只需記住：.img-fluid 是基礎，搭配其他類就能輕鬆實現圖片的響應式適配！