Bootstrap 4 圖片
Bootstrap 4 圖片形狀
圓角
圓形
縮圖
圓角
`.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-right` 類將圖片浮動到右側，或使用 `.float-left` 類浮動到左側
示例
<img src="paris.jpg" class="float-left">
<img src="paris.jpg" class="float-right">
圖片居中
透過為圖片新增實用類 `.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="img_chania.jpg" alt="Chania">
自己動手試一試 »
W3schools 學習路徑
跟蹤您的進度 - 免費！
