bootstrap4.css
.img-fluid {
  max-width: 100%;
  height: auto;
}
■図表キャプション:figure:図表の基本的なスタイリング

図表コンテンツ内の画像
図表キャプション
  <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>
■図表キャプション:figure:図表キャプション:左寄せ(デフォルト)

図表コンテンツ内の画像
図表キャプション左寄せ(デフォルト)(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>
■図表キャプション:figure:図表キャプション:中央寄せ

図表コンテンツ内の画像
図表キャプション中央寄せ(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>
■図表キャプション:figure:図表キャプション:右寄せ

図表コンテンツ内の画像
図表キャプション右寄せ(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::レスポンシブ画像(img-fluid)

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