Bootstrap Card 画像サイズ完全ガイド：完璧なレイアウトをマスターする

bootstrap card 画像サイズ

このガイドでは、Bootstrap 5 の Card コンポーネントを使用して、画像サイズを制御し、視覚的に優れたWebページレイアウトを作成する方法を学びます。

Bootstrap Card 画像のデフォルト動作

.card-img-top と .card-img-bottom クラスを使用すると、画像をカードの上部と下部にそれぞれ配置できます。これらのクラスは、画像の縦横比を維持しながら、カードの幅に合わせて画像を自動的に拡大縮小します。


<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    ...
  </div>
</div>

特定の画像サイズを設定するために、カスタムCSSクラスを作成できます。
width および height プロパティ、または max-width および max-height プロパティを使用して、画像のサイズを定義します。
object-fit プロパティを使用すると、コンテナ内での画像の拡大縮小とトリミングの方法を制御できます。


.custom-img-size {
  width: 200px;
  height: 150px;
  object-fit: cover;
}


@media (min-width: 768px) {
  .card-img-top {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
}

以下は、Bootstrap Card 画像のサイズを制御するための異なる方法を使用したサンプルコードです。

方法コード例

方法	コード例
`.card-img-top` / `.card-img-bottom`	`<div class="card"> <img src="..." class="card-img-top" alt="..."> ... </div>`
カスタムCSSクラス	`<div class="card"> <img src="..." class="custom-img-size" alt="..."> ... </div>`
メディアクエリ	`@media (min-width: 768px) { .card-img-top { width: 100%; height: 300px; object-fit: cover; } }`

.card-img-top / .card-img-bottom


<div class="card">
  <img src="..." class="card-img-top" alt="...">
  ...
</div>

カスタムCSSクラス


<div class="card">
  <img src="..." class="custom-img-size" alt="...">
  ...
</div>

メディアクエリ


@media (min-width: 768px) {
  .card-img-top {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
}

画像がカードの境界線を越えている場合は、object-fit プロパティを使用して、コンテナ内での画像の拡大縮小とトリミングの方法を制御できます。たとえば、object-fit: cover; を設定すると、画像の縦横比を維持しながら、コンテナ全体を覆うように画像が拡大縮小されます。

Bootstrap のグリッドシステムまたはメディアクエリを使用して、画面サイズに基づいて画像サイズを調整できます。たとえば、デスクトップ画面では大きな画像を表示し、モバイル画面では小さな画像を表示することができます。

画像のファイルサイズを最適化するには、画像圧縮ツールを使用できます。オンラインで利用できる無料のツールは多数あります。また、画像を保存するときに、ファイルサイズと画質のバランスが取れた適切なファイル形式を選択することも重要です。

その他の参考記事:bootstrap card 横並び