Bootstrap 5 圖片
圖片形狀
圓角
`.rounded` 類為圖片新增圓角
示例
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
自己動手試一試 »
圓形
`.rounded-circle` 類將圖片塑造成圓形
示例
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
自己動手試一試 »
縮圖
`.img-thumbnail` 類將圖片塑造成縮圖（帶邊框）
示例
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
自己動手試一試 »
對齊圖片
使用 `.float-start` 類將圖片浮動到左側，或使用 `.float-end` 類浮動到右側
示例
<img src="paris.jpg" class="float-start">
<img src="paris.jpg" class="float-end">
居中圖片
透過向圖片新增實用類 `.mx-auto`（margin:auto）和 `.d-block`（display:block）來居中圖片
示例
<img src="paris.jpg" class="mx-auto d-block">
自己動手試一試 »
響應式圖片
圖片有各種尺寸。螢幕也是。響應式圖片會自動調整以適應螢幕尺寸。
透過為 `<img>` 標籤新增 `.img-fluid` 類來建立響應式圖片。這樣，圖片就能很好地適應父容器的大小。
`.img-fluid` 類應用了 `max-width: 100%;` 和 `height: auto;` 到圖片
示例
<img class="img-fluid" src="ny.jpg" alt="New York">
自己動手試一試 »
您知道嗎？
W3.CSS 是 Bootstrap 5 的絕佳替代品。
W3.CSS 更小、更快、更易於使用。
如果您想學習 W3.CSS，請訪問我們的 W3.CSS 教程。
W3schools 學習路徑
跟蹤您的進度 - 免費！
