.rounded クラスは、画像に丸い角を追加します。
<img src="flower.jpg" class="rounded" alt="Cinque Terre">
.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">
画像を中央に配置するには、ユーティリティ クラス .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">