Bootstrapで画像・動画を親幅にフィットさせる完全ガイド！img-fluidとobject-fitを初心者向けに徹底解説

画像・動画を親幅にフィット（.img-fluid と object-fit の実践）

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapで画像を画面いっぱいにきれいに表示したいんですが、どうすればいいですか？」

先生

「Bootstrapには、画像を親要素の幅に合わせるための便利なクラスが用意されていますよ。」

生徒

「動画も同じように調整できますか？」

先生

「できます。img-fluidとobject-fitを理解すると、画像も動画も思い通りに配置できます。」

1. Bootstrapで画像や動画を親幅に合わせるとは？

Webページでは、画像や動画がはみ出したり、小さすぎたりすると見づらくなります。Bootstrapでは、親要素と呼ばれる箱の幅に合わせて、画像や動画のサイズを自動で調整できます。これは、写真をアルバムの枠にぴったり合わせるイメージです。特にスマートフォンやタブレットなど、画面サイズが変わる環境ではとても重要です。

2. img-fluidとは何かをやさしく理解しよう

img-fluidは、Bootstrapに用意された画像専用のクラスです。このクラスを使うと、画像の横幅が親要素の幅いっぱいに広がり、高さは自動で調整されます。難しい計算は不要で、クラスを一つ付けるだけでレスポンシブ対応ができます。


<img src="/img/sample150-100.jpg" class="img-fluid" alt="サンプル画像">

ブラウザ表示

3. img-fluidが内部でしていること

img-fluidは、実際にはCSSで横幅を100パーセント、高さを自動に設定しています。これにより、画像が親の横幅に合わせて伸び縮みします。写真をコピー用紙の枠に合わせて拡大縮小するような感覚です。初心者でも安心して使える理由は、複雑な設定をBootstrapが肩代わりしてくれるからです。


<style>
    .img-fluid {
        max-width: 100%;
        height: auto;
    }
</style>

<img src="/img/sample120-120.jpg" class="img-fluid" alt="内部仕組みの例">

ブラウザ表示

4. 画像が切れてしまうときの考え方

img-fluidは便利ですが、縦横比を保つため、場合によっては余白ができたり、思った見た目にならないことがあります。例えば、正方形の枠に横長の写真を入れると上下に空白ができます。こうしたときに役立つのがobject-fitです。これは画像や動画を箱にどう収めるかを決める考え方です。

5. object-fitで表示方法をコントロールする

object-fitには、coverやcontainなどの指定があります。coverは箱いっぱいに広げ、はみ出た部分を切り取ります。containは全体を収め、余白ができても切れません。写真を額縁に合わせるか、アルバムに収めるかの違いと考えるとわかりやすいです。


<style>
    .fit-cover {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
</style>

<img src="/img/sample150-100.jpg" class="fit-cover" alt="object-fitの例">

ブラウザ表示

6. 動画を親幅にフィットさせる基本

動画も画像と同じように、親要素に合わせてサイズを調整できます。Bootstrapでは、動画タグに幅を100パーセント指定することで、画面サイズに応じて自動調整されます。スマートフォンでも見やすい動画表示が可能になります。


<video src="sample.mp4" class="w-100" controls></video>

ブラウザ表示

7. 動画とobject-fitを組み合わせる

動画でもobject-fitを使うことで、表示方法を細かく調整できます。背景動画のように全面に表示したい場合はcoverが便利です。これにより、デザイン性の高いページを作ることができます。


<style>
    .video-cover {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
</style>

<video src="sample.mp4" class="video-cover" autoplay muted loop></video>

ブラウザ表示