結論

プロは「どう切るか」を2段階で解いている。まず被写体をどこに置くかを三分割法のパワーポイント（交点）で決め、中央固定（日の丸構図）を避けて視線にテンションを作る。次にそれをCSSで実装する——コンテナを aspect-ratio で比率固定し、object-fit: cover で枠を充填クロップ、残すクロップ位置を object-position で必ず上書きする。デフォルトの 50% 50% は顔や商品を切り落とすので、放置は事故の元だ。

01 — 主役は中央でなく三分割の交点に置く

フレームを縦横3分割した「井」の交点がパワーポイント。最重要要素をここ（または線上）に寄せると、中央配置より視線が動的になる。中央＝視線が着いて即停止する静的な日の丸構図で、サムネ一覧が単調・素人っぽく見える。視線の重みは均等ではなく、左上交点が最も注目を集める（40%超とされる）。

✗ 中央固定（日の丸） → 視線が止まり静的・単調
✓ 交点に寄せる → 余白方向に視線が動きテンションが生まれる

secondaryWhat is the Rule of Thirds? — IxDF

02 — 人物は目を上の横線、地平線も横線に乗せる

ポートレートは目を上側の水平グリッド線に、肩を下側の線の内側に収める。風景は地平線を中央でなくいずれかの横線に合わせると安定する。中央に地平線を引くと上下が拮抗して凡庸になる。空を見せたいなら地平線を下の線へ、地面を見せたいなら上の線へ。

✗ 地平線も太陽も中央 → 上下が拮抗して平板
✓ 地平線を下の横線、太陽を交点へ → 空が主役で安定

secondaryWhat is the Rule of Thirds? — IxDF

03 — コンテナに aspect-ratio、img に object-fit:cover で枠を充填クロップ

サイズ不揃いの写真をグリッドで揃える基本形。コンテナ側で aspect-ratio で比率を固定し、内部 img を width/height:100% ＋ object-fit:cover にすると、元写真の比率に関係なく枠を満たしつつ自動クロップされる。fill は枠に合わせて引き伸ばすので顔や商品が潰れる。写真サムネは cover、ロゴは contain で使い分ける。

✗ object-fit:fill → 比率が崩れてロゴが歪む
✓ ロゴは contain で全体保持、写真サムネは cover で充填

blogLet's Learn About Aspect Ratio In CSS — Ahmad Shadeed

04 — object-position で残すクロップ位置（焦点）を必ず上書きする

cover のデフォルトは中央基準（50% 50%）。顔・商品・ロゴなど重要部分が中央にない写真では、首から下だけ・商品が見切れる典型事故になる。object-position は「どの部分を残すか」を決める設定なので、必ず上書きする。アバターは顔が上部にあることが多いので center top。値はキーワード・%・lengthを横→縦の順で指定し、px絶対値でなく**%など相対単位**で持たせると画面サイズが変わっても被写体が枠内に残る。

✗ デフォルト 50% 50% → 顔が枠外、首から下だけ残る
✓ object-position: center top → 顔・目を残してクロップ

secondaryobject-position | CSS-Tricks

05 — 比率はプロダクト全体で意図的に統一する

グリッド内で 1:1・4:3・16:9 が混在すると視覚言語が崩れ、雑な印象になる。比率はコンテンツと UX に合わせて選び、全サーフェスで統一する。正方形（1:1）は最も一貫性を確保しやすくサムネで支配的、ヒーロー／バナーは 16:9 が定番。1枚のソース画像を aspect-ratio 変数（16/9・1/1・3/4）＋ cover で使い回せば、手動クロップ版を量産せず各レイアウトに対応できる。

1:1
4:3
9:16
✗ 比率バラバラ → 高さが揃わず一覧が雑に見える
1:1
1:1
1:1
✓ 1:1 に統一 → グリッドが整い視覚言語が一貫

primaryImage ratio — eBay Playbook

06 — 焦点を変数化して1枚で複数比率に対応する

CMS や LP で同じ写真をカード・ヒーロー・正方形サムネに使い回すなら、焦点を %カスタムプロパティ（--focus-x / --focus-y）に保存し、aspect-ratio を変数で切り替える。焦点は画像クリックで座標を取得して % で持たせる（px は避ける）。横長→縦長など縦横比が大きく変わるヒーローでは、縮小だけでは焦点が枠外に出るため、ブレークポイントで object-position を切り替える（モバイルは center top で顔の上部を多く見せる）。任意焦点をコンテナ中央に固定したい場合は clamp()/calc() 式を使う。

--ratio: 16/9
同一ソース・焦点 64% / 36% を 16:9 ヒーローで使用
1/1
3/4
✓ 同じ --focus 変数のまま比率だけ差し替え → 量産不要

blogUsing focal points, aspect ratio & object-fit to crop images correctly — Henry From Online

blogCropping Images with CSS While Keeping a Focal Point in the Center — Odland

実装スニペット

グリッドサムネを比率固定で統一クロップ（基本形）。img に width/height:100% が無いと object-fit が効かない。HTMLの img にも width/height 属性を付けて CLS を防ぐ。

.card__thumb{
  position: relative;
  aspect-ratio: 4 / 3; /* or 1/1 for square thumbs */
}
.card__thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fills + crops, no distortion */
  object-position: center;  /* override the default 50% 50% as needed */
}

アバター／顔サムネ。顔は上部にあることが多いので center top。中央デフォルトだと顔が切れる。明示寸法が必須。

.avatar{
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center top; /* keep face/eyes, crop body */
  border-radius: 50%;
}

焦点を変数化して1枚で複数比率に対応。焦点は %（相対単位）で持たせると画面サイズが変わっても被写体が枠内に残る。px は避ける。

.media{
  --focus-x: 64.2862%;  /* captured from a click on the source */
  --focus-y: 35.5263%;
  --ratio: 16 / 9;       /* swap to 1/1, 3/4 per context */
}
.media img{
  width: 100%;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  object-position: var(--focus-x) var(--focus-y);
}

任意焦点をコンテナ中央に固定（Odland式・art-direction）。container-type と cqw/cqh 単位が前提。Safari 15未満などはメディアクエリで object-position 切替にフォールバック。

.crop{
  container-type: size;
  aspect-ratio: 3 / 1;
  --crop-focus-x: 0.6;  /* 0-1 range */
  --crop-focus-y: 0.5;
}
.crop img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  --image-width: calc(100cqw - 100%);
  --image-height: calc(100cqh - 100%);
  object-position:
    clamp(0%, calc(0.5*100cqw - var(--crop-focus-x)*var(--image-width)), 100%)
    clamp(0%, calc(0.5*100cqh - var(--crop-focus-y)*var(--image-height)), 100%);
}
@media (max-width: 1080px){
  .crop img{ object-position: center top; } /* simpler fallback on mobile */
}

チェックリスト

  • 主役を中央固定（日の丸）にしていないか。三分割の交点・線上に寄せたか
  • 人物は目を上の横線に、風景は地平線をいずれかの横線に乗せたか
  • コンテナに `aspect-ratio` を設定し、`img` は `width/height:100%` ＋ `object-fit:cover` にしたか
  • `object-position` をデフォルト `50% 50%` のまま放置せず、焦点を上書きしたか（顔は `center top`）
  • 焦点を px 絶対値でなく %（相対単位）で指定したか
  • 写真は `cover`、ロゴは `contain`。`fill` で歪ませていないか
  • `img` に `width/height` 属性（または `aspect-ratio`）を付け、CLS を防いだか
  • グリッド内で比率を混在させず、プロダクト全体で意図的に統一したか（サムネは 1:1 が無難）
  • 横長→縦長で比率が大きく変わるヒーローは、ブレークポイントで `object-position` を切り替えたか

限界 / 出典

三分割法は経験則であり厳密な視覚法則ではない。「左上交点が注目40%超」「center top が顔向き構図に効く」は単一ソース由来で、被写体やデザイン文脈で変動するため鵜呑みにしない。CSS の数値（焦点 64.2862% 等）は出典のサンプル値で、実画像では焦点を取り直すこと。Odland式の clamp()/calc() 式は出典の表記に揺れがあり（clamp の引数順は min, preferred, max が正で、上のスニペットはその順に整理した）、本番投入前に実機検証が必須。container query 単位と aspect-ratio は Safari 15+／Chrome 88+／Firefox 89+ 対応で、それ未満の環境は @supports ＋ padding-top のフォールバックが必要。比率の「1:1推奨」は eBay のプロダクト文脈であり、ブランドや媒体によって最適比率は異なる。

secondaryWhat is the Rule of Thirds? — IxDF

blogRule of Thirds in Design and Photography: A Visual Guide

secondaryHow To Scale and Crop Images with CSS object-fit — DigitalOcean

secondaryobject-position | CSS-Tricks

blogUsing focal points, aspect ratio & object-fit to crop images correctly — Henry From Online

blogCropping Images with CSS While Keeping a Focal Point in the Center — Odland

blogLet's Learn About Aspect Ratio In CSS — Ahmad Shadeed

primaryThe CSS aspect-ratio property — web.dev

primaryImage ratio — eBay Playbook