img-fluid

bootstrap5.css

bootstrap5.css

.img-fluid {
  max-width: 100%;
  height: auto;
}

html bootstrap5 Sample

図とキャプション：figure-caption

図表の画像 — 図表キャプション

  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption">図表キャプション</figcaption>
  </figure>

図表キャプション左寄せ（デフォルト）：text-left

図表の画像 — 図表キャプション左寄せ（デフォルト）（text-left：デフォルト）

  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption text-left">図表キャプション左寄せ（デフォルト）（text-left：デフォルト）</figcaption>
  </figure>

図表キャプション中央寄せ：text-center

図表の画像 — 図表キャプション中央寄せ（text-center）

  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption text-center">図表キャプション中央寄せ（text-center）</figcaption>
  </figure>

図表キャプション右寄せ：text-right

図表の画像 — 図表キャプション右寄せ（text-right）

  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption text-right">図表キャプション右寄せ（text-right）</figcaption>
  </figure>

レスポンシブ画像：img-fluid

  <img src="https://via.placeholder.com/710x250/FFFF00/000000?text=img" class="img-fluid" alt="レスポンシブ画像">