ブートストラップ4イメージ
ブートストラップ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-fluidクラスを追加して、レスポンシブ画像を作成します。<img>その後、画像は親要素に合わせて適切に拡大縮小されます。
.img-fluidクラスは画像に適用max-width: 100%;さ
れます。height: auto;
例
<img class="img-fluid" src="img_chania.jpg" alt="Chania">