メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

イメージ（Images）

画像をレスポンシブ動作に再定義し（親よりも広くなることはない）、軽量なスタイルをすべてクラスを経由して追加するための解説と例。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目

レスポンシブイメージ（Responsive images）

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

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

.img-fluid あり

木片

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

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

イメージのサムネイル（Image thumbnails）v5.2.0デザイン変更

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

見本
プレースホルダ200x200
設定例
<img src="..." alt="..." class="img-thumbnail">
img.img-thumbnail
【設定】
  • <img> タグに .img-thumbnail を入れる
  • loading="lazy" を入れて、ブラウザの非表示領域での画像の読込処理を遅延読込させる（ブラウザによる）
    • 【変更履歴】
    • 【v5.2.0】
      • border-radius の値を調整したので、若干丸みを帯びたデザインに変更

イメージの配置（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">
img.float-startimg.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
【設定】
  • <img> に .mx-auto.d-block を入れる

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

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

ピクチャ（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>
pic>(src:mt)*3+img.img-thumbnail（追加画像が3つの場合）

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

Sass変数（Sass variables）v5.3.0変数から名称変更

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

デフォルトの設定
scss/_variables.scss 内 thumbnail-variables の設定$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      var(--#{$prefix}body-bg);
$thumbnail-border-width:            var(--#{$prefix}border-width);
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           var(--#{$prefix}border-radius);
$thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm);