天天看點

Bootstrap5 圖像形狀

.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="cinqueterre.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="img_chania.jpg" alt="Chania">