ブログの一覧やお知らせのカードで、写真の高さがばらばらになって、下の文字の位置までそろわない。よくあるこの困りごとは、CSSの aspect-ratio と object-fit の2つで解決できます。写真を1枚ずつトリミングし直す必要はありません。

今回は、16:9のカード、正方形のサムネイル、見せたい場所を残す切り方、切らずに全体を見せる形の4種類を、コピペ用のコードつきで紹介します。あわせて、値を変えたときの見え方の違いと、画像の読み込みで表示がずれないための書き方もまとめました。

連載「WEBの技術」の19回目です。
今回は「画像の比率をそろえる」。地味ですが、一覧ページの印象がいちばん変わる指定です。

完成見本：写真の形がばらばらでも、カードはそろう

上の段は、横長の写真と正方形の写真をそのまま並べたもの、下の段は比率を 16:9 にそろえたものです。点線の箱の幅を自動で広げたり縮めたりしていますが、下の段は形を保ったまま大きさだけが変わります。

自動で動いています。点線の箱の幅が変わっても、下の段は 16:9 のまま

そろえる前（画像を並べただけ）

そろえた後（aspect-ratio: 16 / 9 ＋ object-fit: cover）

※ 見本は見た目を見せるためのもので、読み上げソフトでは読まれないようにしています。箱の幅を動かしているのは見本だけの動きで、コピペ用のコードには入っていません。端末の「動きを減らす」設定がオンのときは、自動では動きません。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-ar は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

HTMLの img には、元の画像の大きさを width と height で書いておきます。理由は「仕組み」の節で説明します。WordPressの画像ブロックで入れた画像には、この2つが自動で付いていることが多いので、その場合はクラス名を付けるだけで使えます。

1. 写真の高さを16:9でそろえる

横長の写真と正方形の写真が混ざっていても、カードの写真の形を 16:9 にそろえる形です。aspect-ratio: 16 / 9 で枠の比率を決め、object-fit: cover で、枠からはみ出した部分を切り落とします。写真をトリミングし直さなくても、一覧の高さがそろいます。

自動で動いています。点線の箱の幅が変わっても、画像の形は変わりません

<div class="kd-ar-cards">
  <figure class="kd-ar-card">
    <img src="画像のURL" alt="画像の内容" width="1200" height="800">
    <figcaption>お知らせのタイトル</figcaption>
  </figure>
  <!-- 同じ形の figure を並べる -->
</div>

.kd-ar-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.kd-ar-card {
  margin: 0;
}
.kd-ar-card img {
  display: block;
  width: 100%;
  height: auto;
  /* 枠の比率を 横16：縦9 にする */
  aspect-ratio: 16 / 9;
  /* 枠いっぱいに広げて、はみ出した部分は切る */
  object-fit: cover;
  border-radius: 8px;
}
.kd-ar-card figcaption {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
}

2. 正方形のサムネイル

一覧の小さな画像を、すべて正方形にそろえる形です。aspect-ratio: 1 / 1 で正方形の枠にして、object-fit: cover で真ん中を残して切り取ります。人の写真や商品の写真を、同じ大きさで並べたいときに使います。

自動で動いています。点線の箱の幅が変わっても、画像の形は変わりません

<div class="kd-ar-sq">
  <img src="画像のURL" alt="画像の内容（例：スタッフの写真）" width="1200" height="800">
  <img src="画像のURL" alt="画像の内容" width="800" height="800">
  <img src="画像のURL" alt="画像の内容" width="1200" height="800">
</div>

.kd-ar-sq {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.kd-ar-sq img {
  display: block;
  width: 100%;
  height: auto;
  /* 正方形にする */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
}

3. 見せたい場所を残す

横長の写真を縦長の枠に入れると、何もしなければ真ん中が残り、左右が切れます。object-position で「どこを残すか」を決めると、写真の主役（ここではヨット）を枠の中に残せます。見本では、残す位置を左から右へ動かしています。

自動で動いています。残す位置（object-position）を左から右へ動かしています

<img class="kd-ar-tall" src="画像のURL" alt="画像の内容（例：海に浮かぶヨット）" width="1200" height="800">

.kd-ar-tall {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  /* スマホの画面のような縦長（横9：縦16）の枠 */
  aspect-ratio: 9 / 16;
  object-fit: cover;
  /* 横は左から20%の位置、縦は真ん中を残す */
  object-position: 20% 50%;
  border-radius: 8px;
}

4. 切らずに全体を見せる

ロゴや図のように、端が切れると困る画像に使う形です。object-fit: contain にすると、画像の比率を保ったまま、枠の中に全体が収まるように縮めます。余ったところは背景の色になるので、薄い色を敷いておくと、そろって見えます。

自動で動いています。点線の箱の幅が変わっても、画像の形は変わりません

<div class="kd-ar-fit">
  <img src="ロゴのURL" alt="会社名のロゴ" width="1200" height="800">
  <!-- 同じように img を並べる -->
</div>

.kd-ar-fit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.kd-ar-fit img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  /* 切らずに、全体が枠に収まるように縮める */
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  background: #F4F7FA;
  border: 1px solid #D8E6F0;
  border-radius: 6px;
}

仕組み：「枠の形」と「中の画像の入れ方」を分けて決める

比率をそろえる指定は、2つの役割に分かれています。aspect-ratio が「枠をどんな形にするか」を決め、object-fit が「その枠に、画像をどう入れるか」を決めます。この2つを分けて考えると、どちらを変えればいいかが分かりやすくなります。

1. aspect-ratio：枠の比率を決める

aspect-ratio: 16 / 9 と書くと、横16に対して縦9の比率の枠になります。幅が300pxなら高さは約169px、幅が150pxなら約84px、というように、幅に合わせて高さが自動で決まります。見本で箱の幅を動かしても形が崩れなかったのは、このためです。

注意点が1つあります。MDNによると、aspect-ratio は、幅か高さの少なくとも一方が自動（auto）でないと効きません。コードで height: auto と書いているのはそのためです。テーマのCSSなどで画像に高さが決め打ちされていると、比率の指定が効かないことがあります。

2. object-fit：枠に、画像をどう入れるか

枠の比率と画像の比率がちがうとき、画像をどう入れるかを決めるのが object-fit です。何も書かないときは fill（初期値）で、画像は枠に合わせて引きのばされます。よく使うのは次の2つです。

• cover：画像の比率を保ったまま、枠をすき間なく埋めるように広げる。はみ出した部分は切れる
• contain：画像の比率を保ったまま、全体が枠に収まるように縮める。余ったところはすき間（背景）になる

3. object-position：どこを残すか

cover で切るとき、初期値では画像の真ん中が残ります（object-position の初期値が 50% 50% のため）。主役が端にある写真は、object-position: 20% 50% のように、横と縦の位置を指定して、残す場所をずらします。

4. img の width と height は、表示のずれを防ぐため

画像は、読み込みが終わるまで大きさが分かりません。そのため、読み込みが終わった瞬間に下の文章がずれる、ということが起きます。MDNでは、img に width と height を書いておくと、ブラウザが読み込む前に比率を計算して場所を確保するので、このずれを減らせると説明されています。CSSで width: 100% と height: auto を付けていれば、書いた数字のとおりの大きさに固定されることはありません。

aspect-ratio は2021年9月から、object-fit は2020年1月から、主要なブラウザでそろって使えるようになり、今はどちらも「Baseline」の広く使える段階です。今のブラウザなら、特別な対策なしで使えます。

数値を変えるとどうなるか

object-fit の3つの値（正方形の鉢植えを、16:9の枠に入れた場合）

fill：引きのばされる

contain：全体が入る

cover：はみ出しを切る

fill は鉢植えが横に引きのばされ、形が変わってしまいます。contain は全体が見えますが、左右に白いすき間ができます。cover は枠いっぱいに入りますが、上と下が切れています。写真なら cover、ロゴや図なら contain、fill は基本的に使わない、と覚えておくと迷いません。

aspect-ratio の値（横長の海の写真）

16 / 9：横長

4 / 3：少し横長

1 / 1：正方形

同じ写真でも、比率によって残る範囲が変わります。16:9は動画やトップの画像でよく使う形、4:3は少し縦に余裕がある形、1:1は一覧やSNSの画像でよく使う形です。縦長にするほど、横長の写真は左右が大きく切れます。

object-position（横長の写真を、9:16の縦長の枠に入れた場合）

50% 50%（初期値）

20% 50%

初期値の 50% 50% では真ん中が残るので、左寄りにあるヨットが半分切れています。20% 50% にすると、残す場所が左へ寄り、ヨット全体が入ります。数字は「画像のどこを、枠のどこに合わせるか」の割合で、0%が左（上）、100%が右（下）です。

スマホと、見る人への配慮

大事な情報を、切れる場所に置かない

cover は画像の一部を切ります。写真の中に文字（キャンペーンの日付や料金など）が入っていると、その文字が切れることがあります。文字は画像に焼き込まず、HTMLの文章で書くのが基本です。文字入りの画像を使うしかない場合は、contain にします。

切れても、alt は画像の中身を書く

alt（画像の代わりに読み上げられる説明）は、画面で見えている範囲ではなく、画像が伝えたいことを書きます。見本の画像は飾りとして読み上げから外していますが、お知らせや商品の画像なら「新しい鉢植えの商品写真」のように、中身が分かる言葉にします。

スマホでは、比率を変えることもある

PCでちょうどよい 16:9 でも、スマホで1列に並べると、1枚が画面の大半を占めることがあります。メディアクエリ（画面の幅で指定を切りかえる書き方）で、スマホだけ aspect-ratio を変える、という使い方もできます。まずは実際のスマホで、一覧を1画面にどれくらい見せたいかを見て決めます。

やりすぎ注意

すべての画像を同じ比率に切ると、一覧はそろいますが、写真の見どころまで切ってしまうことがあります。そろえるのは「並べて見せる場所」だけにして、記事の中の1枚の写真は、元の比率のまま見せるほうが伝わる場合が多くあります。

「比率をそろえる」は、写真を小さく切る指定でもあります。
何が切れているかを、一覧の全部の写真で確かめてから公開します。

AIに頼むなら

この指定は、Claudeなどの生成AIに頼んでもすぐ書いてもらえます。そのときは「比率」「切ってよいか」「残す位置」「置く場所」まで伝えると、手直しが少なく済みます。

ブログ一覧のカードの写真を、CSSで16:9にそろえて。aspect-ratio と object-fit: cover を使う。
img には width と height を書き、CSSは width: 100%; height: auto; にする。
ロゴの一覧だけは object-fit: contain にして、背景を薄いグレーに。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

• height が決め打ちされていないか。height: 200px のように高さが固定されていると、aspect-ratio が効かず、幅が変わると形が崩れます
• 古い書き方になっていないか。padding-top: 56.25% で比率を作る書き方は、aspect-ratio が使えなかったころのやり方です。今は aspect-ratio の1行で済みます
• 実際の写真で、大事なところが切れていないか。見本の画像では問題がなくても、使う写真によって切れる場所は変わります。一覧の写真を全部並べて、スマホの幅でも確かめます

手元の画像の比率を調べたいときは、KAKERU TOOLSのアスペクト比 計算ツールも使えます。画像を入れると縦横の比率が分かり、「横が○pxなら縦は何px」も計算できます。

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

• 写真の大きさがそろわない一覧。ブログの一覧、お知らせ、施工例など、担当者が毎回ちがう写真を入れるページは、1のように 16:9 などで枠をそろえます。入れる人が写真の大きさを気にしなくてよくなります
• 人や商品を同じ大きさで並べる場所。スタッフ紹介や商品の一覧は、2の正方形にそろえます。写真の撮り方がばらばらでも、並べたときに落ち着いて見えます
• ロゴや図を並べる場所。取引先のロゴや、資格のマークのように切れては困る画像は、4の contain にして、背景の色で枠をそろえます

使わない場面

• 記事の中の、1枚で見せる写真。比率をそろえる理由がないので、元の比率のまま見せます。切ると、撮った人が入れたかったものが消えることがあります
• 文字が入った画像。バナーやチラシの画像を cover で切ると、文字が欠けます。そろえたいなら、画像を作る段階で同じ比率に作ります
• 図や表の画像。端まで情報がある画像は切らずに見せます。小さくて読めないなら、比率ではなく画像の作り方を見直します

写真を入れる人と、ページを作る人が別のサイトほど、この指定が効きます。
「どんな写真が入っても崩れない」を、CSSで先に用意しておく考え方です。

まとめ

• aspect-ratio は「枠の形」、object-fit は「枠への画像の入れ方」を決める
• aspect-ratio は、幅か高さの一方が auto のときに効く。height: auto を付けておく
• 写真は cover（はみ出しを切る）、ロゴや図は contain（全体を収める）。fill は引きのばされるので使わない
• 切る場所は object-position で決める。初期値は真ん中（50% 50%）
• img に width と height を書くと、読み込み前に場所が確保され、表示のずれを減らせる
• 並べて見せる場所だけそろえ、1枚で見せる写真や文字入りの画像は切らない

まずは1の「16:9でそろえる」のCSSを、ブログの一覧などのカードに当ててみてください。そのあと、横長・正方形・縦長の写真を混ぜて入れ、どこが切れるかを確かめると、自分のサイトに合う比率が見えてきます。

参考にした資料

いずれも2026年10月23日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

• MDN「aspect-ratio」（英語）
  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio
  ※要素の横と縦の比率を決める指定であること。幅か高さの少なくとも一方が自動（auto）でないと効かないこと
• MDN「object-fit」（英語）
  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit
  ※fill（初期値・比率を無視して引きのばす）、contain（全体を収める）、cover（枠を埋めて、はみ出しを切る）などの値の意味
• MDN「object-position」（英語）
  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-position
  ※枠の中で画像をどこに置くかの指定で、初期値が 50% 50%（真ん中）であること
• MDN「<img>: The Image Embed element」（英語）
  https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img
  ※img に width と height を書くと、読み込む前にブラウザが比率を計算して場所を確保し、表示のずれを減らせること
• web-features「aspect-ratio」（Baselineのデータ）
  https://github.com/web-platform-dx/web-features/blob/main/features/aspect-ratio.yml
  ※aspect-ratio が2021年9月から主要なブラウザでそろって使え、2024年3月から「広く使える」段階になったこと
• web-features「object-fit」（Baselineのデータ）
  https://github.com/web-platform-dx/web-features/blob/main/features/object-fit.yml
  ※object-fit が2020年1月から主要なブラウザでそろって使え、2022年7月から「広く使える」段階になったこと

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

関連記事丸い画像・好きな形の画像をCSSで作る｜つぶれない円の作り方と、コピペで使える5種類

2026.10.21

関連記事カードを並べるCSS｜グリッドで自動で折り返す、auto-fillとauto-fitの違いとコピペで使える4種類

2026.10.20

関連記事画像に乗せるとズームする動きをCSSだけで｜コピペで使える5種類と、まわりを崩さない書き方

2026.10.21