.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">