【CSS】object-fitで画像を簡単トリミング！cover・containの違いと使い方

シュウ

公開日: 2020.03.06 / 更新日: 2026.11.10
今回は【CSS】object-fitプロパティで、画像を簡単にトリミングする方法について解説していきます。

object-fitを初めて使う方
画像をボックスの大きさにきれいに収める方法を知りたい方です。
画像が縦横につぶれて困っている方
widthとheightを指定したら、画像が歪んでしまった方です。
画像のトリミング作業を減らしたい方
サイズを揃えるたびにPhotoshopなどで加工している方です。

object-fitプロパティを使用する理由

画像には、横長のものや縦長のものがあります。サイズを統一してきれいに並べたい場合、以前はPhotoshopなどで画像を加工してからアップロードする必要がありました。

かといって、CSSでwidthとheightを固定サイズで指定すると、元の縦横比が崩れて画像がつぶれて表示されます。

画像サイズを固定するだけの、次のようなCSSです。

.object-fit_img img {
    width: 250px;
    height: 250px;
}

●①width / height: 画像の幅と高さを両方とも250pxに固定しています。元画像が正方形でない場合、縦横比が崩れて歪みます。

そこで便利なのがobject-fitです。画像を加工せずに、CSSだけで縦横比を保ったままトリミングできます。

object-fitプロパティとは

object-fitプロパティは、img要素やvideo要素などの置換要素を、ボックスの中にどのように収めて表示するかを指定します。

画像そのものを加工するのではなく、表示のしかたをCSSで切り替えるプロパティです。値はfill・contain・cover・none・scale-downの5種類です。

object-fitの基本的な書き方

object-fitは、img要素に対して値を指定します。まずは画像をdivで囲んだ、シンプルなHTMLを用意します。

<div class="object-fit_img"><img src="../images/img.jpg" alt=""></div>

●①object-fit_img: 画像を囲むクラス名です。object-fit専用のクラスを付けておくと、他の画像に影響せず管理しやすくなります。

次に、画像の幅と高さを指定し、object-fitに値を指定します。

.object-fit_img img {
    width: 250px;
    height: 250px;
    object-fit: cover; /*--値を入力--*/
}

●①width / height: 画像を表示するボックスの大きさを指定します。

●②object-fit: 画像をボックスにどう収めるかを指定します。ここではcoverを指定しています。

See the Pen wvaPaRp by shu (@shu0325) on CodePen.

object-fitに指定できる5つの値

object-fitの値は全部で5種類あります。まずは違いを一覧で確認しましょう。

●①fill（初期値）: 縦横比を維持せず、ボックスいっぱいに引き伸ばします。

●②contain: 縦横比を維持したまま、全体が収まるように縮小・拡大します。余白ができます。

●③cover: 縦横比を維持したまま、ボックス全体を覆うように表示します。はみ出した部分はトリミングされます。

●④none: 画像をリサイズせず、元のサイズで表示します。ボックスより大きい部分はトリミングされます。

●⑤scale-down: noneとcontainを比べて、小さくなるほうの表示になります。

1つずつ見ていきましょう。ここからの解説は、すべて次のサイズ指定を共通で使用します。

<div class="object-fit_img"><img src="../images/img.jpg" alt=""></div>

fill（初期値）の使い方

fillは初期値です。ボックスのサイズに合わせて、縦横比を維持せず、全体が表示されるようにリサイズします。画像が引き伸ばされて歪むため、通常は使う機会が少ない値です。

.object-fit_img img {
    width: 200px;
    height: 200px;
    object-fit: fill; /*--値を入力--*/
}

●①object-fit: fill;: 何も指定しない場合と同じ表示です。元画像の縦横比が崩れます。

See the Pen WNvXQXm by shu (@shu0325) on CodePen.

containの使い方

containは、ボックスのサイズに合わせて、縦横比を維持したまま、全体が表示されるようにリサイズします。画像が切れないため、ロゴや商品画像などに向いています。

.object-fit_img img {
    width: 200px;
    height: 200px;
    object-fit: contain; /*--値を入力--*/
}

●①object-fit: contain;: 画像全体が必ず見えるように収まります。縦横比が合わない場合、ボックス内に余白ができます。

See the Pen yLNPYjL by shu (@shu0325) on CodePen.

coverの使い方

coverは、ボックスのサイズに合わせて、縦横比を維持したまま、ボックス全体を覆うようにリサイズします。はみ出した部分はトリミングされます。サムネイルなど、画像サイズを揃えたい場面で最もよく使用されます。

.object-fit_img img {
    width: 200px;
    height: 200px;
    object-fit: cover; /*--値を入力--*/
}

●①object-fit: cover;: ボックスに隙間ができないように拡大し、はみ出した部分を切り取ります。余白を作りたくないときに使います。

See the Pen KKpydJK by shu (@shu0325) on CodePen.

noneの使い方

noneは、リサイズをせずに、元のサイズのままトリミングして表示します。画像の中央がボックスの中央に揃います。

.object-fit_img img {
    width: 200px;
    height: 200px;
    object-fit: none; /*--値を入力--*/
}

●①object-fit: none;: 画像を拡大も縮小もしません。元画像がボックスより大きい場合は、はみ出した部分が切り取られます。

See the Pen vYOWLNV by shu (@shu0325) on CodePen.

scale-downの使い方

scale-downは、noneを指定した場合とcontainを指定した場合を比べ、サイズが小さくなるほうで表示します。

.object-fit_img img {
    width: 200px;
    height: 200px;
    object-fit: scale-down; /*--値を入力--*/
}

●①object-fit: scale-down;: 元画像がボックスより小さい場合はnoneと同じ、大きい場合はcontainと同じ表示になります。画像が拡大されることはありません。

See the Pen poJdgRE by shu (@shu0325) on CodePen.

object-positionプロパティとは

object-positionプロパティは、img要素やvideo要素などの置換要素を、ボックスの中のどの位置に表示するかを指定します。object-fitと組み合わせて、トリミングする位置を調整したいときに使用します。

なお、object-fit: fillの場合は画像がボックスいっぱいに広がるため、object-positionを指定しても見た目は変わりません。

object-positionの基本的な書き方

object-positionは、img要素に値を指定します。値は半角スペースで区切り、1つ目が水平方向（横）の位置、2つ目が垂直方向（縦）の位置を決めます。初期値は50% 50%（中央）です。

<div class="object-fit_img"><img src="../images/img.jpg" alt=""></div>

.object-fit_img img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    object-position: 80% 50%; /*--値を入力--*/
}

●①object-fit: cover;: 画像をトリミングして表示します。object-positionは、トリミングされる位置を調整するために使用します。

●②object-position: 80% 50%;: 1つ目の80%が横位置、2つ目の50%が縦位置です。右寄りの部分を表示します。

See the Pen ExjbmPO by shu (@shu0325) on CodePen.

object-positionの指定方法

object-positionは、px指定・%指定・キーワード指定（top right bottom left）の3つの方法で指定できます。以降のサンプルでは、2枚の画像に別々のクラスを付けて、違いを比較します。

<div class="object-fit_img">
    <img class="img01" src="../images/img.jpg" alt="">
    <img class="img02" src="../images/img.jpg" alt="">
</div>

px指定の使い方

px指定は、ボックスの左上を基準にして、画像の位置を数値で指定します。マイナスの値も指定できます。

.object-fit_img img {
    width: 200px;
    height: 200px;
    border: 10px solid #5c87a6;
    background: #e2d0b6;
}

.object-fit_img .img01 {
    object-fit: cover;
    object-position: -40px 80px; /*--値を入力--*/
}

.object-fit_img .img02 {
    object-fit: contain;
    object-position: 40px -20px; /*--値を入力--*/
}

●①img01（cover）: -40px 80pxを指定すると、画像が左に40px、下に80pxずれた位置に表示されます。

●②img02（contain）: 40px -20pxを指定すると、画像が右に40px、上に20pxずれた位置に表示されます。

●③border / background: 余白やトリミングの位置が分かりやすいように、枠線と背景色を付けています。

See the Pen NWqwjbg by shu (@shu0325) on CodePen.

%指定の使い方

%指定は、ボックスと画像の対応する位置を、割合で揃えます。0% 0%で左上、100% 100%で右下、50% 50%で中央に揃います。

.object-fit_img img {
    width: 200px;
    height: 200px;
    border: 10px solid #5c87a6;
    background: #e2d0b6;
}

.object-fit_img .img01 {
    object-fit: cover;
    object-position: 5% 40%; /*--値を入力--*/
}

.object-fit_img .img02 {
    object-fit: contain;
    object-position: 10% 80%; /*--値を入力--*/
}

●①img01（cover）: 5% 40%を指定すると、画像の左寄り・やや上の部分が表示されます。

●②img02（contain）: 10% 80%を指定すると、画像がボックスの左寄り・下寄りに配置されます。

See the Pen wvaPdgJ by shu (@shu0325) on CodePen.

キーワード指定の使い方

top・right・bottom・left・centerのキーワードでも指定できます。top rightのように、縦横それぞれの位置を英単語で書けるため、直感的で読みやすい指定方法です。

.object-fit_img img {
    width: 200px;
    height: 200px;
    border: 10px solid #5c87a6;
    background: #e2d0b6;
}

.object-fit_img .img01 {
    object-fit: cover;
    object-position: top right; /*--値を入力--*/
}

.object-fit_img .img02 {
    object-fit: contain;
    object-position: bottom left; /*--値を入力--*/
}

●①top right: 画像の右上の部分を基準に表示します。

●②bottom left: 画像の左下の部分を基準に表示します。

See the Pen WNvXjpE by shu (@shu0325) on CodePen.

aspect-ratioと組み合わせてレスポンシブ対応する

ここまではwidthとheightを固定値で指定してきましたが、実務では画面幅に合わせて画像サイズが変わるレイアウトが多くなります。その場合は、aspect-ratioとobject-fit: coverを組み合わせると、縦横比を保ったまま、画像のサイズをそろえることができます。

.object-fit_img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

●①width: 100%;: 親要素の幅いっぱいに画像を広げます。

●②aspect-ratio: 16 / 9;: 高さを指定せず、縦横比（幅：高さ）でボックスの形を決めます。

●③object-fit: cover;: ボックスに合わせて画像をトリミングします。どの画像を使用しても、同じ縦横比で揃います。

IEに対応させる方法（旧環境向け）

現在のChrome・Firefox・Safari・Edgeなどのモダンブラウザは、object-fitとobject-positionに対応しています。一方、Internet Explorer 11は未対応です。IEのサポートはすでに終了しているため、通常は対応不要ですが、旧環境の保守案件などで必要な場合は「object-fit-images」を使用します。

object-fit-imagesサイト

object-fit-imagesを読み込む

上記のページからZIPファイルをダウンロードし、中にあるofi.min.jsを使用します。まずはHTMLで画像にobject-fit-imgというクラスを付け、スクリプトを読み込みます。

<div><img src="../images/img.jpg" class="object-fit-img" alt=""></div>

<script src="js/ofi.min.js"></script>

次に、付けたクラス名を指定してスクリプトを実行します。

objectFitImages('img.object-fit-img');

●①ofi.min.js: IEでobject-fitを再現するためのスクリプトです。

●②objectFitImages(): 対象のクラス名を指定すると、該当の画像にIE向けの処理が適用されます。

IE専用のCSSを追加する

さらに、IEに対応させるための専用スタイルとして、font-familyに'object-fit: 〇〇;'の形で値を指定します。

/*--使用例 ①--*/
.object-fit-img {
    object-fit: contain;
    font-family: 'object-fit: contain;'; /*--追加 ①--*/
}

/*--使用例 ②--*/
.object-fit-img {
    object-fit: cover;
    object-position: bottom left;
    font-family: 'object-fit: cover; object-position: bottom left;'; /*--追加 ②--*/
}

●①font-family: 通常のフォント指定ではなく、スクリプトが読み取るための記述です。object-fitやobject-positionと同じ値を文字列で書きます。

●②使用例 ① ②: ①はcontain、②はcoverとobject-positionを組み合わせた例です。

まとめ

今回は、object-fitとobject-positionを使った画像のトリミング方法を紹介しました。object-fitで画像の収め方を決め、object-positionでトリミング位置を調整します。実務でも頻繁に使用されるプロパティなので、サンプルを試しながらしっかりマスターしましょう。

POINT