Bootstrap5 画像の形状

Bootstrap 5 は、画像の外観をすばやく調整・最適化するための多くのクラスを提供します。特に、画像の形状、サイズ、レスポンシブレイアウトを制御します。

角丸画像

.roundedクラスを使用すると、画像に角丸効果を表示できます：

楕円画像

.rounded-circleクラスを使用すると、楕円形の画像を設定できます:

サムネイル

.img-thumbnailクラスは画像のサムネイルを設定するために使用されます（画像に枠線があります）:

画像の配置

使用.float-startクラスを使用して画像を左揃えに設定し、使用.float-endクラスで画像を右揃えに設定します:

画像の中央寄せ

使用.mx-auto (margin:auto)と .d-block (display:block)クラスを使用して画像を中央揃えに設定します：

レスポンシブ画像

画像にはさまざまなサイズがあり、画面のサイズに応じて自動的に適合させる必要があります。

タグに追加<img>クラスを使用してレスポンシブ画像を設定します。.img-fluidクラスは設定します

.img-fluid例max-width: 100%; 、 height: auto; :