一覧ページのサムネイルの縦横比をそろえたい、スマートフォンでは人物が切れないように位置をずらしたい。そんなときに、画像をあらためて書き出さずに、CSSだけで切り抜けると便利です。 結論は、aspect-ratio で枠の比率を決め、object-fit: cover で枠を埋め、object-position で切り抜く位置を決めることです。 この記事では、Cruwのサイトで実際に使っているCSSを例に、表示結果のスクリーンショットつきで紹介します。
object-fitの値ごとの違いと、aspect-ratioで比率を決める書き方object-positionで、写真のどこを残すかを決める方法- 写真の一部分を拡大して切り抜く方法と、パソコンとスマホで切り抜き方を変える方法
※2023年に公開した「【CSS】画像を好きな箇所・好きな比率でトリミングする方法」を、今の書き方にあわせて作り直した記事です。
結論：aspect-ratio・object-fit・object-position の3つで切り抜く
.thumb {
display: block;
width: 100%;
aspect-ratio: 4 / 3; /* 枠の比率（横4：縦3） */
object-fit: cover; /* 歪ませずに枠を埋め、はみ出した部分を切る */
object-position: 50% 30%; /* 残したい位置（横 縦） */
}<img class="thumb" src="photo.jpg" alt="打ち合わせの様子" width="1200" height="800">この3行で、元の写真がどんな比率でも「横4：縦3」の枠にぴったり収まり、はみ出した部分は自動で切り取られます。 object-fit と aspect-ratio は、Chrome・Edge・Firefox・Safari の現在のバージョンで使えます。
以前は、比率をそろえるために padding-top: 75%; の箱を作って画像を絶対配置する書き方がよく使われていました。今は aspect-ratio を1行書くだけで済みます。
object-fit の値の違い（fill・contain・cover）
object-fit は、画像を枠（width と height で決めた大きさ）にどう収めるかを決めるプロパティです。 同じ横長の写真を、正方形の枠に入れて比べてみました。
| 値 | 表示のされ方 | 向いている場面 |
|---|---|---|
fill（初期値） | 枠に合わせて引き伸ばす。写真が歪む | ほぼ使わない |
contain | 写真全体を枠の中に入れる。上下か左右に余白ができる | ロゴ、商品画像、図など、切れては困るもの |
cover | 枠を埋めるまで拡大し、はみ出しを切る | サムネイル、メインビジュアルなどの写真 |
none | 元の大きさのまま。はみ出しは切る | 特殊な用途 |
scale-down | none と contain の小さい方 | 小さい画像を拡大したくないとき |
トリミングに使うのは cover です。 一方で、Cruwのトップページに置いている「サイト改善おまかせパック」のバナーでは、スマホ表示のときにイラストが文字に重ならないよう、あえて contain を使い、object-position: center bottom; で下にそろえています。切れては困る画像には contain が向いています。
aspect-ratio で、好きな比率にトリミングする
aspect-ratio は、要素の縦横比を決めるプロパティです。width だけを決めれば、高さは比率から自動で計算されます。
/* 横幅いっぱい・4:3 のサムネイル */
.card img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* 正方形 */
.icon img {
width: 120px;
aspect-ratio: 1;
object-fit: cover;
}Cruwのホームページ制作のページでは、「こんな方におすすめ」の写真をこの書き方で 4:3 にそろえています。元の写真の比率がばらばらでも、カードの高さがそろうので、一覧がきれいに見えます。
img に width と height の属性も書いておく
HTMLの img には、元の画像の width と height を書いておくのがおすすめです。 ブラウザが画像を読み込む前に場所を確保できるので、読み込み中にレイアウトがガタッとずれる（CLS：レイアウトのずれ）のを防げます。CSSで width: 100% と aspect-ratio を指定していれば、表示される大きさはCSSのほうが優先されます。
WordPressでは、メディアから挿入した画像に width と height が自動で入ります。
object-position で、切り抜く位置を決める
cover で切り抜くと、初期値では写真の真ん中が残ります。残したい人や物が端にあるときは、object-position で位置をずらします。
img {
object-fit: cover;
object-position: 15% center; /* 横 縦 */
}値は「横の位置」「縦の位置」の順に書きます。
0%は左端（上端）、100%は右端（下端）、50%（center）は真ん中leftrighttopbottomのキーワードも使える- 横長の写真を正方形に切るときは、はみ出すのは左右だけなので、効くのは横の値だけ。写真より横長の枠に入れるときは、上下がはみ出すので縦の値で調整する
% は「写真の何%の位置を、枠の何%の位置に合わせるか」という意味です。0% なら写真の左端が枠の左端に、100% なら右端が右端に合います。思った位置にならないときは、5%ずつ変えながらブラウザで確認するのが早いです。
パソコンとスマホで、切り抜く位置を変える
画面幅によって枠の形が変わるときは、メディアクエリで object-position を切り替えます。 Cruwの会社概要ページのメインビジュアルでは、実際に次のように書いています。
#lowerFirstView img {
object-position: center 20%; // パソコン：横長の枠。上下を切るので、縦の位置を調整
@media (max-width: 767px) {
object-position: 0% center; // スマホ：縦長の枠。左右を切るので、左端に寄せる
}
}
横長の枠では写真の上下が、縦長の枠では左右が切れます。どちらの枠でも主役が残るように、切れる方向にあわせて値を決めるのがポイントです。
写真の一部分を拡大してトリミングする方法
object-fit: cover は「枠を埋めるところまで」しか拡大しません。写真の一部分だけを大きく見せたいときは、次の3つの方法があります。
| 方法 | 対応ブラウザ | おすすめの場面 |
|---|---|---|
① transform: scale() で拡大 | すべての主要ブラウザ | 基本はこれ。img のまま使える |
② 背景画像（background-size） | すべての主要ブラウザ | 装飾の画像 |
③ object-view-box | Chrome・Edge のみ（2026年11月時点） | 試験的に使うとき |
① 枠で隠して、transform: scale() で拡大する（おすすめ）
画像を包む要素に overflow: hidden をつけ、中の画像を transform: scale() で拡大します。 transform-origin（拡大の中心）を、残したい場所にあわせるのがコツです。
<div class="zoom">
<img src="photo.jpg" alt="打ち合わせで使っているモニター" width="1200" height="800">
</div>.zoom {
overflow: hidden; /* 枠からはみ出した部分を隠す */
aspect-ratio: 4 / 3;
border-radius: 14px;
}
.zoom img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 30% 45%;
transform: scale(2.4); /* 2.4倍に拡大 */
transform-origin: 30% 45%; /* 拡大の中心（object-position と同じにする） */
}
object-position と transform-origin を同じ値にしておくと、「その場所を中心に拡大する」と考えられるので、位置を調整しやすくなります。 画像は img のままなので、alt や loading="lazy"、WordPressが自動でつける srcset（画面に合わせた大きさの画像の出し分け）もそのまま使えます。
なお、拡大すると画質は粗くなります。2倍以上に拡大するなら、元の画像を大きめに用意しておきましょう。 ちなみにCruwのホームページ制作のページでは、同じ仕組みで、写真にマウスを重ねたときだけ scale(1.05) で少し拡大する動きをつけています。
② 背景画像にして、background-size と background-position で調整する
旧記事で紹介した方法です。img を使わず、div などの背景画像として表示します。
.zoom-bg {
aspect-ratio: 4 / 3;
background-image: url(photo.jpg);
background-size: 240%; /* 拡大率 */
background-position: 30% 45%; /* 位置 */
background-repeat: no-repeat;
}拡大率と位置を2行で決められるので手軽ですが、背景画像には alt をつけられず、検索エンジンや画面の読み上げにも「画像」として伝わりません。 飾りの画像には向いていますが、内容を伝える写真には ① の方法をおすすめします。
③ object-view-box で切り抜く範囲を指定する（対応ブラウザに注意）
object-view-box は、画像の「どの範囲を見せるか」を直接指定できる新しいプロパティです。
img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover; /* 切り抜いた範囲と枠の比率が違っても歪まないように */
object-view-box: inset(25% 40% 20% 15%); /* 上 右 下 左 をどれだけ切り落とすか */
}書き方はわかりやすいのですが、MDNの互換性データ（2026年11月に確認）では、対応しているのは Chrome・Edge（バージョン104から）だけで、Safari は開発者向けのプレビュー版のみ、Firefox は未対応です。 iPhone の Safari で効かないため、今はまだ本番のサイトでは ① の方法を使うのが安心です。
写真を差し替えたいほど違うなら、picture 要素を使う
パソコンでは横長の全体写真、スマホでは人物のアップ、のように「切り抜き位置の調整」では足りないときは、picture 要素で画像そのものを出し分けます。
<picture>
<source media="(max-width: 767px)" srcset="photo-sp.jpg" width="750" height="1000">
<img src="photo-pc.jpg" alt="打ち合わせの様子" width="1600" height="600">
</picture>スマホでは photo-sp.jpg、それ以外では photo-pc.jpg が読み込まれます。スマホ用の画像は小さく書き出せるので、表示も速くなります。 ただし画像を2枚用意して管理する手間が増えるので、まずは object-position の切り替えで足りないかを試してみてください。
トリミングがうまくいかないときのチェックポイント
| 症状 | よくある原因と対処 |
|---|---|
object-fit: cover が効かない | 画像に高さが決まっていない。height か aspect-ratio を指定する |
| 画像の下に数pxのすき間ができる | img は文字と同じ扱いのため。display: block; をつける |
| 角丸にしたのに、拡大した画像が角からはみ出す | 角丸と overflow: hidden を、画像ではなく包む要素につける |
| flexやgridの中で比率が崩れる | 子要素が引き伸ばされている。align-self: start; をつけるか、包む要素に比率を指定する |
| 拡大した写真がぼやける | 元の画像が小さい。表示する大きさの2倍程度の画像を用意する |
よくある質問
object-fit は動画にも使えますか？
使えます。video 要素に object-fit: cover; を指定すれば、写真と同じように枠いっぱいに表示して、はみ出しを切り取れます。背景に動画を流すメインビジュアルなどでよく使われます。
WordPressのブロックエディターでもトリミングできますか？
画像ブロックの設定にある「アスペクト比」と「縮尺」で、この記事と同じ aspect-ratio と object-fit が設定されます。縮尺の「余白なし」が cover、「余白あり」が contain です。切り抜く位置まで細かく決めたいときは、追加CSSクラスをつけて、テーマのCSSで object-position を指定するのがおすすめです。
画像を加工ソフトで切り抜くのと、どちらがいいですか？
比率や位置をデザインの都合で変えることが多いなら、CSSでの切り抜きが便利です。元の写真は1枚のままなので、後から比率を変えたいときもCSSを直すだけで済みます。一方で、表示されない部分のデータも読み込むので、極端に大きな写真は、表示サイズに近い大きさに縮小してからアップロードしましょう。
まとめ
- 画像のトリミングは、
aspect-ratioで比率、object-fit: coverで枠を埋め、object-positionで残す位置を決める - パソコンとスマホで枠の形が変わるときは、メディアクエリで
object-positionを切り替える。写真ごと変えたいときはpicture要素 - 一部分を拡大したいときは、包む要素に
overflow: hidden、画像にtransform: scale()。object-view-boxはまだ Chrome・Edge だけ
Cruwでは、長野県上田市を拠点に、スマートフォンでもパソコンでも写真がきれいに見えるホームページの制作を行っています。「スマホで写真の人物が切れてしまう」「一覧ページのサムネイルをそろえたい」といったご相談も、ホームページ制作のページからお気軽にどうぞ。
