Bootstrap 5 イメージ

コース推薦：

画像の形状

角 .rounded

例

クラスを使用して画像に角を追加します：

自分で試してみる

<img src="flower.jpg" class="rounded" alt="花">

円形 .rounded-circle

例

クラスを使用して画像を円形にします：

自分で試してみる

<img src="flower.jpg" class="rounded-circle" alt="クイネッティ・テレル">

縮図 .img-thumbnail

例

クラスを使用して画像を縮図（枠付き）にします：

自分で試してみる

<img src="flower.jpg" class="img-thumbnail" alt="クイネッティ・テレル">

画像を整列させる .float-start クラスを使用して画像を左に浮遊させます、または .float-end 右に浮遊：

例

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

自分で試してみる

中央に配置された画像

画像を中央に配置するために、utility クラスを画像に追加します。 .mx-auto (マージン: 自動) そして .d-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="ニューヨーク">

自分で試してみる