Bootstrap 5 圖像

圖像形狀

圓角

.rounded 類為圖像添加圓角：

實例

<img src="flower.jpg" class="rounded" alt="Flower">

親自試一試

圓形

.rounded-circle 類將圖像塑造為圓形：

實例

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

親自試一試

縮略圖

.img-thumbnail 類將圖像塑造為縮略圖（帶邊框）：

實例

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

親自試一試

對齊圖像

使用 .float-start 類將圖像向左浮動，或使用 .float-end 向右浮動：

實例

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

親自試一試

居中圖像

為了使圖像居中，我們通過向圖像添加了 utility 類 .mx-auto (margin:auto) 和 .d-block (display:block)：

實例

<img src="tulip.jpg" class="mx-auto d-block">

親自試一試

響應式圖像

圖像有各種尺寸。屏幕也是如此。響應式圖像會自動調整以適應屏幕尺寸。

通過將 .img-fluid 類添加到 <img> 標簽來創建響應式圖像。然后圖像將很好地縮放到父元素內。

.img-fluid 類為圖像應用 max-width: 100%; 和 height: auto; ：

實例

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

親自試一試