Bootstrap 5 で画像の形を変える
Bootstrap 5 では、クラスを使って簡単に画像の形を変えることができます。
円形の画像
.rounded-circle クラスを画像に適用すると、完全な円形になります。画像のアスペクト比が1:1であることを確認してください。そうでないと、楕円形になります。
<img src="..." class="rounded-circle" alt="...">サムネイル
.img-thumbnail クラスを適用すると、画像が枠線と少しの角丸で囲まれ、サムネイルのような外観になります。
<img src="..." class="img-thumbnail" alt="...">角丸の画像
.rounded クラスは、画像に小さな角丸を追加します。
<img src="..." class="rounded" alt="...">.rounded-pill クラスは、より大きな角丸を追加し、カプセルのような形にします。
<img src="..." class="rounded-pill" alt="...">画像のフロート
.float-start、.float-end、.float-none クラスを使用して、画像のフロート方向を制御できます。
| クラス | 説明 |
| .float-start | 画像を左側にフロートします。 |
| .float-end | 画像を右側にフロートします。 |
| .float-none | 画像のフロートを解除します。 |
レスポンシブな画像
.img-fluid クラスを使用すると、画像が親要素の幅に合わせて縮小され、レスポンシブになります。
<img src="..." class="img-fluid" alt="...">max-width: 100% と height: auto を組み合わせて使用すると、画像がコンテナからはみ出さないようにすることができます。
<img src="..." class="img-fluid" style="max-width: 100%; height: auto;" alt="...">参考資料
-
Bootstrap 5 ドキュメント - 画像: https://getbootstrap.com/docs/5.0/content/images/
よくある質問
Q1: .rounded-circle クラスを使用しても画像が円形になりません。
A1: 画像の幅と高さが同じであることを確認してください。そうでない場合は、画像が楕円形になります。
Q2: 画像を特定のサイズに設定するにはどうすればよいですか？
A2: width 属性と height 属性を使用して、画像のサイズを設定できます。例えば、<img src="..." width="100" height="100" alt="..."> は、幅と高さが 100px の画像を表示します。
Q3: レスポンシブな画像を特定のアスペクト比に保つにはどうすればよいですか？
A3: padding-top を使用してアスペクト比を維持できます。詳細については、Bootstrap 5 ドキュメント - Spacing を参照してください: https://getbootstrap.com/docs/5.0/utilities/spacing/