メインコンテンツへスキップ

イメージ(Images)

レスポンシブ動作内のイメージの選択(親要素よりも大きくならないように)をイメージ化し、クラスに軽量スタイルを追加するための解説と例。

レスポンシブイメージ(Responsive images)

Bootstrapの画像は、.img-fluid でレスポンシブになる。これにより max-width:100%;, height:auto; が適用され、親の幅に合わせて拡大縮小される。

見本
プレースホルダレスポンシブイメージ

.img-fluid あり

木片

.img-fluid なし(原寸大)※画面からはみ出す部分は非表示にしています

木片
設定例
<img src="..." alt="..." class="img-fluid">
【設定】
  • <img> タグに .img-fluid を入れる

 

イメージのサムネイル(Image thumbnails)

境界のユーティリティに加えて、.img-thumbnail を使用すると、画像に丸みを帯びた1pxの境界線の持つスタイルを使用できる。

見本
プレースホルダ200x200
設定例
<img src="..." alt="..." class="img-thumbnail">
【設定】
  • <img> タグに .img-thumbnail を入れる
  • loading="lazy" を入れて、ブラウザの非表示領域での画像の読込処理を遅延読込させる(ブラウザによる)

 

イメージの配置(Aligning images)

横の配置ユーティリティクラス文字の中央揃えクラスでイメージを配置。block-levelイメージは .mx-auto クラスを使用して中央揃えができる。

1. イメージを左右に配置 v5.0.0-beta1設定変更

見本
プレースホルダ200x200 プレースホルダ200x200
Bootstrap5.xの設定例 緑背景が変更箇所
<img src="..." alt="..." class="rounded float-start">
<img src="..." alt="..." class="rounded float-end">
※Bootstrap4.xの設定例 赤背景が変更箇所
<img src="..." alt="..." class="rounded float-left">
<img src="..." alt="..." class="rounded float-right">
【設定】
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
      • 行頭揃え:.float(-{breakpoint})-left.float(-{breakpoint})-start
      • 行末揃え:.float(-{breakpoint})-right.float(-{breakpoint})-end

2. イメージの中央揃え .mx-auto.d-block 使用)

見本
プレースホルダ200x200
設定例
<img src="..." alt="..." class="rounded mx-auto d-block">
【設定】
  • <img>.mx-auto.d-block を入れる

3. イメージの中央揃え .text(-{breakpoint})-center 使用)

見本
プレースホルダ200x200
設定例
<div class="text-center">
  <img src="..." alt="..." class="rounded">
</div>
【設定】

 

ピクチャ(Picture)

<picture> 要素を使用して特定の <img> に複数の <source> 要素を指定する場合は、.img-* クラスを <picture> タグではなく、必ず <img>タグに追加。

※写真は夜の Oslo Opera Houseを使用。

見本 ブラウザのビューポートに応じて写真が変わります
夜の Oslo Opera House
設定例
​<picture>
  <source media="(min-width: 1280px)" srcset="1280px-Opera_by_night.jpg">
  <source media="(min-width: 1024px)" srcset="1024px-Opera_by_night.jpg">
  <source media="(min-width: 640px)" srcset="640px-Opera_by_night.jpg">
  <img src="320px-Opera_by_night.jpg" alt="夜の Oslo Opera House" class="img-thumbnail">
</picture>

 

Sass v5.0.0-beta3追加

変数(Variables)

画像のサムネイルには変数を使用できる。

デフォルトの設定
scss/_variables.scss 内 thumbnail-variables の設定$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;