object-fit完全ガイド！画像のトリミングとリサイズをCSSで自由にコントロールする方法

object-fit で画像のトリミング・リサイズをコントロールする方法

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

生徒

「ホームページに画像を載せるとき、サイズがバラバラだと形が歪んでしまったり、きれいに収まらなくて困っています。」

先生

「そんなときにとても便利なのが、CSSのobject-fitプロパティですね。」

生徒

「オブジェクトフィットを使うと、画像のトリミングやリサイズがどう変わるんですか？」

先生

「それでは、画像のデザインを自由自在に整えるための詳しい使い方を一緒に見ていきましょう！」

1. object-fitプロパティとは何かを初心者向けに解説

ホームページのデザインをしていると、用意した画像の大きさがバラバラであったり、指定した枠組みの大きさにぴったりと合わずに悩んでしまうことがよくあります。昔は画像編集ソフトを使ってあらかじめ大きさをすべてきれいに切り揃える必要がありましたが、現代のウェブ制作ではCSSの機能を使うことで自動的に調整できるようになっています。その中でも特に強力な機能がobject-fitプロパティです。object-fitとは、HTMLの画像や動画などのメディア要素を、指定した親となるボックスの領域に対してどのように収めるかを指示するためのCSSプロパティのことです。プログラミング初心者の方であっても、基本的な仕組みとそれぞれのキーワードの意味をしっかりと覚えるだけで、驚くほど簡単におしゃれで綺麗なレイアウトを作成することができるようになります。

2. 画像を綺麗に切り抜くカバー機能の使い方

画像を正方形や特定の長方形の枠に合わせたいとき、普通に大きさを変更すると縦横の比率が狂ってしまい、人が横に引き延ばされたような不自然な見た目になってしまうことがあります。そのようなときに役立つのがcoverという値です。coverを指定すると、画像の縦横比をしっかりと維持したまま、指定された枠組みの領域全体を隙間なく埋め尽くすように自動で拡大または縮小し、入り切らなかった部分は自動的に切り落とすトリミング処理を行ってくれます。これにより、写真の形が変に歪んでしまう心配が一切なくなり、まるでプロのデザイン雑誌のような整ったビジュアルを簡単にウェブサイト上で表現することが可能になります。


<style>
    .box-cover {
        width: 200px;
        height: 150px;
        border: 2px solid #333;
    }
    .img-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

<div class="box-cover">
    <img src="/img/sample150-100.jpg" alt="カバー表示のサンプル" class="img-cover">
</div>

ブラウザ表示

3. 画像全体を余すことなく見せるテイン機能の仕組み

写真やイラストの一部が切り取られてしまうことなく、全体の姿をすべてユーザーに届けたいという場面もあります。そんなときはcontainという値を指定するのが最適です。containとは、画像の縦横比を完全に守った状態のまま、指定された親要素の枠内に画像全体が綺麗に収まるように大きさを自動調整してくれる便利な機能です。画像が小さくなって枠の中にすっぽりと収まるため、上下や左右のスペースに余白が生まれることがありますが、写真の一部が隠れて見えなくなってしまうというトラブルを完全に防ぐことができます。商品の全体像を正確に見せたいECサイトの商品紹介ページや、図解のイラストを掲載するブログ記事などにおいて、非常に重宝される書き方となっています。


<style>
    .box-contain {
        width: 200px;
        height: 150px;
        background-color: #f0f0f0;
        border: 1px dashed #666;
    }
    .img-contain {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
</style>

<div class="box-contain">
    <img src="/img/sample120-120.jpg" alt="テイン表示のサンプル" class="img-contain">
</div>

ブラウザ表示

4. 独自のサイズ感で調整するフィルとスケールダウンの活用

これまでに紹介した機能の他にも、用途に合わせて使い分けられる便利な値がいくつか用意されています。例えばfillという値を指定すると、親要素の大きさに合わせて画像の縦横比を無視して強制的に引き延ばしたり縮めたりして、隙間なく全体を満たすように表示させることができます。また、noneを指定すると画像の元の大きさや比率をそのまま保ったまま、指定されたボックスのなかに配置されます。さらにscale-downという値を設定すると、containとnoneのうち画像サイズがより小さくなる方を自動的に判断して適用してくれるため、大きな画像がはみ出すのを防ぎつつ、小さな画像はそのままのサイズで美しく保つという柔軟なコントロールが可能になります。


<style>
    .box-fill {
        width: 180px;
        height: 120px;
        border: 1px solid #000;
    }
    .img-fill {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
</style>

<div class="box-fill">
    <img src="/img/sample150-100.jpg" alt="フィル表示のサンプル" class="img-fill">
</div>

ブラウザ表示

5. オブジェクトポジションで表示位置を微調整する方法

画像をトリミングして表示する際、中心以外の部分を見せたいと感じることはありませんか。例えば人物の写真をカバー表示にしたとき、自動的に中央が切り抜かれるため顔が端に寄って見切れてしまうことがあります。そんな位置の不満を完璧に解消してくれるのがobject-positionプロパティです。object-positionとは、ボックス内で画像を表示させる位置を上下左右に細かく調整するためのCSSプロパティのことです。これに上や右などのキーワードやパーセンテージの数値を指定することで、トリミングされた画像の中からどの部分を基準にして表示させるかを思い通りにコントロールできるようになります。細部の見栄えにこだわることで、ホームページ全体の完成度が一段と引き締まります。


<style>
    .box-position {
        width: 150px;
        height: 150px;
        border: 1px solid #ccc;
    }
    .img-position {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top right;
    }
</style>

<div class="box-position">
    <img src="/img/sample150-100.jpg" alt="ポジション調整のサンプル" class="img-position">
</div>

ブラウザ表示

6. 実践的なレイアウトで学ぶレスポンシブな画像デザイン

ここまでの知識をしっかりと組み合わせることで、スマートフォンやパソコンなどどんな画面サイズであっても美しく崩れないレスポンシブな画像レイアウトを自由自在に作ることができるようになります。実際のウェブサイト作成現場では、ブログのサムネイル画像やスタッフ紹介のプロフィール写真、あるいはニュース記事のアイキャッチ画像など、様々な場所で同じ大きさの枠組みの中に異なる比率の写真が配置されます。そのようなシチュエーションにおいて、親要素となるボックスの横幅や高さをしっかりと固定した上で、内部の画像に適切なクラス名を付与してコントロールすることが定番のテクニックとなっています。初心者の方も様々な数値を実際に試しながら、自分の思い通りの見栄えに整えられる楽しさをぜひ体感してみてください。


<style>
    .card-sample {
        width: 250px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .card-img {
        width: 100%;
        height: 140px;
        object-fit: cover;
    }
</style>

<div class="card-sample">
    <img src="/img/sample120-120.jpg" alt="カード風デザインのサンプル" class="card-img">
    <div style="padding: 10px;">
        <p style="margin: 0; font-size: 14px;">きれいなカードデザインです</p>
    </div>
</div>

ブラウザ表示