Bootstrapには画像表示に関するクラスも用意されています。
サンプルを確認しながら
Bootstrap4のバージョン4.3をベースに書いています。
レスポンシブでの画像表示
img-fluidで親要素に合わせて幅いっぱいに表示されます。
その際に画像の高さが自動調整されます。
コード
<img src="・・・" class="img-fluid" alt="・・・">
水平表示位置
flatやtextのクラスを指定して配置することができます。
コード
<img src="・・・" class="flat-right" alt="・・・">
サムネイル表示
img-thumbnailで外側に枠線が追加されます。
コード
<img src="・・・" class="img-thumbnail" alt="・・・">
角を丸く画像を表示
roundedで画像の四隅を角丸で表示することができます。
コード
<img src="・・・" class="rounded" alt="・・・">
丸く画像を表示
rounded-circleで画像を丸く表示させます。
縦横の比率が１：1での表示
縦横の比率が１：２での表示
コード
<img src="・・・" class="rounded-circle" alt="・・・">
