Bootstrapでは、画像の幅は固定のピクセル値（例: 300px）で決まるのではなく、画面の幅と、その画像が配置されている**グリッドシステムのカラム（列）**によって動的に変化します。
1. img-fluid クラスの役割
まず基本として、Bootstrapでレスポンシブな画像を扱う際には img-fluid クラスを使用します。
このクラスは、画像に以下のCSSを適用します。
max-width: 100%;
height: auto;
これにより、画像は親要素（通常はカラム .col-*）の幅を超えることはなく、アスペクト比を保ったまま自動的に縮小されます。
2. Bootstrapのブレークポイント
Bootstrapは、画面幅に応じてレイアウトを切り替えるための「ブレークポイント」を定義しています。Bootstrap 5の主要なブレークポイントは以下の通りです。
ブレークポイント 接頭辞 画面幅
- X-Small (なし) <576px
- Small sm ≥576px
- Medium md ≥768px
- Large lg ≥992px
- Extra large xl ≥1200px
- Extra extra large xxl ≥1400px
- 3. グリッドシステムと画像の幅の関係
先日修正した index.php の以下のコードを例に説明します。
<div class="row row-cols-1 row-cols-md-3 row-cols-lg-5 g-4">
<?php foreach ($paginatedPosts as $post): ?>
<div class="col">
<?php include __DIR__ . '/../assets/includes/post_item.php'; ?>
</div>
<?php endforeach; ?>
</div>
まとめ
Bootstrapにおける画像の幅は、
img-fluid クラスによって、親要素（カラム）の幅いっぱいに広がるように設定される。
その親要素であるカラムの幅が、Bootstrapのブレークポイントに応じて row-cols-* や col-* クラスによって変化する。
という2段階で決まります。そのため、「〇〇pxの時に画像の幅は何pxになる」と固定で決まっているわけではなく、画面幅に対する相対的な割合で変化するとご理解ください。
