「画像」と「画像を表示する枠」を分けて考える。
object-fit・object-positionの使い分け

KOOL:CREAT;2026.10.24

写真を新しいものに差し替えたら、頭の上が切れてしまった。横に引き伸ばされて、人物が太って見える。逆に、写真が小さく収まって、周りが余白だらけになった。

画像を変えたときのこうした崩れは、写真そのものが悪いとは限りません。多くの場合、「どんな形の画像を」「どんな形の枠に」「どう収めるか」の組み合わせが合っていないことで起こります。

国東バスケットボールクラブの活動支援ページでも、２人の人物を配置していた部分を、集合写真１枚に変えたいという依頼がありました。写真を入れ替えた段階で形が崩れ、コードをもう一度見直すやり取りが発生しています。

今回はこの制作記録を入口に、全体を見せるのか、切り取って枠を埋めるのかを先に決め、そのうえで画像の表示を調整する方法を整理します。制作画像と保存コードは当時の記録です。２枚の画像は別のページのもので、同じ箇所の修正前・修正後ではありません。比較の図と練習用コードは、本記事の説明用に作成しました。

この記事に必要な知識

読むだけならHTML・CSSの予備知識は必要ありません。「画像」と「枠」を分けるところから説明します。試すならWordPressで下書きの練習ページを開き、カスタムHTMLブロックを追加して保存・プレビューできること。メディアライブラリに画像をアップロードし、そのURLをコピーできること。CSSを入れる場所を確認できること。今回覚えること縦横比、画像のwidth・height、height: auto、aspect-ratio、object-fit（contain・cover・fill）、object-position。作業の範囲練習ページに置く写真１枚。テーマ全体の画像設定、画像編集ソフトでのトリミングや圧縮は扱いません。

読む目安：約15分。画面や設定の名前は、WordPressのバージョンやテーマによって異なる場合があります。

この記事の内容

1. 写真を差し替えたら、形が崩れた
2. 「切れる」「伸びる」「小さい」を分ける
3. 画像の形と、枠の形
4. 全体を見せるか、枠を埋めるか
5. 集合写真で確かめることと、AIへの相談文
6. 練習：写真１枚を枠に収める
7. PC・スマホで、顔・伸び・余白を確かめる
8. 変わらない・ぼやけるときは

01

写真を差し替えたら、
形が崩れた。

活動支援ページの冒頭は、黒い背景の左側に見出し、右側にバスケットボールをする２人の人物を置く構成でした。人物は背景のない切り抜きのような画像で、黄色い帯の上に重ねています。

このページについて保存されていたコードを見ると、２枚の画像に別々のclass名が付き、それぞれに位置・幅・高さが指定されていました。

/* 当時のコードから、画像の配置に関わる指定だけを抜粋 */
.kb-support-page__player {
  position: absolute;
  object-fit: contain;
  object-position: center bottom;
}

.kb-support-page__player--back {
  right: 44%;
  bottom: 38px;
  width: 47%;
  height: 73%;
}

.kb-support-page__player--front {
  right: -5%;
  bottom: 0;
  width: 68%;
  height: 93%;
}

奥の人物用、手前の人物用と、人物１人ずつの形に合わせた「枠」が用意されていたことが分かります。さらに、保存コードの手前側の画像には、ファイル名から集合写真と読み取れる画像のURLが入っていました。一方で、幅68%・高さ93%といった人物用の指定はそのまま残っています。

この保存コードが、崩れた画面とまったく同じ状態だったかまでは記録から確定できません。ただ、ここから言えることがあります。画像のURLを変えても、枠の形と位置の指定は変わらないということです。縦長の人物に合わせた枠に、横に広い集合写真を入れれば、小さく収まったり、どこかが切れたりする可能性があります。

また、人物の画像には影を付ける指定もありました。背景のない切り抜き画像なら人物の輪郭に影が付きますが、背景のある四角い写真では、影の出方も変わります。写真の種類が変わるときは、周りの指定も含めて見直す必要があります。

02

「切れる」「伸びる」「小さい」を、
先に分ける。

「写真がおかしい」と感じたら、まず何が起きているのかを言葉にします。見た目は似ていても、確認する場所が違うためです。

起きていること	よくある状態	最初に確認すること
切れる	頭の上や、端の人が見えない	枠の縦横比と写真の縦横比の違い、object-fit: cover、overflow: hidden
伸びる・つぶれる	丸いボールが楕円に見える、人物が太く見える	幅と高さを両方決めていないか、object-fitの指定があるか
小さい・余白が多い	写真の上下や左右に、大きな空きができる	枠の形、object-fit: contain、親の要素の高さ
ぼやける	拡大すると輪郭が粗い	元の画像の大きさ。CSSでは細部を増やせない

原因は、画面を見ただけでは確定できません。同じ「切れる」でも、写真の上端に元から余裕がなかった場合もあります。確認の順番の例を挙げます。

1. 元の写真を、そのまま開いて見る。その写真自体に、全員の頭や足元が入っているかを確かめます。
2. 元の写真の大きさを確かめる。横と縦が何ピクセルかを見ると、横長か縦長か、どのくらい大きく表示できるかが分かります。
3. 写真を表示している枠の形を確かめる。幅と高さがどう決まっているか、ほかの指定で高さが固定されていないかを見ます。
4. 収め方の指定を確かめる。object-fitやobject-positionがあるか、どの値かを見ます。

WordPressのメディアライブラリでは、画像を選ぶと表示される詳細の欄に、画像の寸法とファイルのURLが表示されます。URLをコピーするボタンも用意されています。［1］

03

画像の形と、枠の形。

ここで、今回の中心になる言葉を一つ覚えます。縦横比です。横と縦の長さの比率のことで、横1200px・縦800pxの写真なら「横3：縦2」になります。

画像には元々の縦横比があります。そして、画面に表示するときには、その画像を置く場所、つまり枠の大きさが決まります。この２つの縦横比が同じなら、写真はそのまま縮小・拡大されて収まります。違うときに、切るのか、余白を残すのか、引き伸ばすのかという選択が生まれます。

幅だけ決めて、高さは自動にする

一番基本の方法は、幅だけを決め、高さを自動にすることです。

img {
  width: 100%;
  height: auto;
}

これは説明のための最小の例です。幅を親の幅いっぱいにし、高さは画像の縦横比に合わせて自動で決まります。横3：縦2の写真を幅600pxで表示すれば、高さは400pxです。写真が切れることも、伸びることもありません。

全員を見せたい集合写真なら、まずこの状態を基準にします。枠の形を写真に合わせる考え方です。

幅と高さを両方決めると、形を合わせる必要が出る

デザイン上、「この枠は正方形にしたい」「高さを400pxにそろえたい」という場面もあります。幅と高さを両方決めた枠に、形の違う写真を入れると、何も指定しない場合は写真が枠に合わせて引き伸ばされます。object-fitの初期値はfillで、縦横比を無視して枠を埋めるためです。［2］

枠の縦横比をCSSで決めるときは、aspect-ratioが使えます。幅か高さの少なくとも一方が自動のときに、指定した比率になるよう、もう一方の長さが調整されます。［3］

HTMLのwidth・heightも書いておく

HTMLの<img>にwidthとheightの属性を書くと、画像を読み込む前にブラウザーが縦横比を計算でき、読み込み中の表示のずれを減らせます。［4］この数字は表示サイズの固定ではなく、元の画像の大きさを伝えるものとして書きます。CSSでheight: autoを指定していれば、画面の幅に合わせて縮みます。

04

全体を見せるか、
枠を埋めるか。

写真と枠の形が違うとき、どう収めるかを決めるのがobject-fitです。主に使うのは次の３つです。［2］

値	収め方	向いている場面
contain	縦横比を保ったまま、写真全体を枠の中に収める。形が違う分、上下か左右に余白が出る	集合写真など、写っているものを欠かしたくないとき
cover	縦横比を保ったまま、枠全体を埋める。はみ出した部分は切り取られる	風景や雰囲気の写真など、多少切れても枠を埋めたいとき
fill	縦横比を無視して、枠いっぱいに引き伸ばす（初期値）	写真では、形が崩れるため使う場面は限られる

違いを、学習用の図で比べてみます。横3：縦2の図を、正方形の枠に入れたものです。点線が枠の範囲です。

元の図（横3：縦2）

fill：伸びる

contain：全員入る

cover：両端が切れる

本記事のために描いた学習用の図を、ブラウザー上でobject-fitだけ変えて表示しています。制作中のサイトの画面や写真ではありません。

containでは７人全員が入りますが、上下に余白が出ます。coverでは枠が埋まりますが、左右の端にいる４番と７番が切れています。どちらが正しいということはなく、何を優先するかを先に決めることが大切です。

object-positionは、どこを残すかを決める

object-positionは、枠の中で画像をどこに寄せるかの指定です。初期値は中央（50% 50%）です。［5］coverと組み合わせると、切り取るときにどの部分を優先して残すかを選べます。顔が上の方にある写真なら、object-position: 50% 30%;のように上寄りにする、といった使い方です。

ただし、object-positionは元の画像にない部分を作り出せません。上のcoverの例で左に寄せれば４番は見えますが、今度は７番がさらに切れます。全員を見せたいのに誰かが切れるなら、寄せる位置ではなく、枠の形か収め方を見直すところです。当時のコードに当てはめると

保存コードの人物用の画像はobject-fit: contain;とobject-position: center bottom;でした。全体を見せつつ、枠の下側にそろえる指定です。この指定のまま縦長の枠へ横長の集合写真を入れれば、写真は枠の幅に合わせて小さくなり、上に空きができる計算になります。

05

集合写真で確かめることと、
AIへの相談文。

活動支援の案内は、トップページにも追加しています。こちらは７人の集合写真を、横長の枠で見せたセクションです。専用ページとは別の箇所ですが、集合写真を扱うときに何を見るかの参考になります。

集合写真では、次の点を確認します。この画像なら、左の大人が挙げた指先は写真の上端近くまで届いていて、手前の子が持つボールも下の端の近くにあります。こうした「端に近いもの」が、収め方を変えたときに最初に切れる部分です。

• 全員の顔が、切れずに見えているか。
• 頭の上や、挙げた手の先に余裕があるか。
• 左右の端の人やボールが、枠の外に出ていないか。
• 足元まで見せたいのか、腰から上でよいのかが決まっているか。
• 丸いボールが、楕円に見えていないか。

相談するときは、今の画面と、希望する見せ方、元の写真の大きさを伝えます。写真の差し替えだけで済むのか、枠の指定も変える必要があるのかを、AIに確認してもらう形にします。

相談文の例｜当時の依頼をもとに、記事用に整理した例です

WordPressのカスタムHTMLで作っている、活動支援ページです。
添付の画像１は、今のパソコンの画面です。
右側にある２人の人物画像を、集合写真１枚に変えたいです。

集合写真は横長で、全員の顔と頭の上を切らずに見せたいです。
引き伸ばしは避けたいです。左右や上下に少し余白が出るのは構いません。
パソコンでは文章の右側、スマホでは文章の下に置きたいです。

集合写真の元の大きさは、横＿＿px・縦＿＿pxです。
現在のHTMLとCSSを、このあとに貼ります。

画像のURLだけを変えればよいのか、
枠の幅・高さ・位置の指定も変える必要があるのか確認してください。
変更する範囲と、追加か置き換えかを示してください。

下線の部分には、メディアライブラリで確認した数字を入れます。「切れてもよい部分」と「絶対に見せたい部分」を一言添えると、containとcoverのどちらで考えるかが伝わりやすくなります。

回答のコードを反映する前に、どのclass名の、どの指定を置き換えるのかを確認します。元のコードには人物２人分の指定があるため、手前の画像だけを集合写真にして、奥の画像の指定が残る、ということも起こり得ます。

06

練習：写真１枚を枠に収める。

ここからは、練習用の写真１枚で、収め方を切り替えてみます。元のサイトに適用したコードではありません。公開中のページではなく、下書きの練習ページで試してください。

１．練習に使う画像を用意する

自分で撮った写真や、使ってよいと確認できている画像をメディアライブラリにアップロードします。詳細の欄で寸法を確認し、「URLをクリップボードにコピー」でURLを控えます。［1］横長の集合写真があれば、違いが分かりやすくなります。

２．HTMLを入れる（カスタムHTMLブロック）

練習ページにカスタムHTMLブロックを追加し、次のHTMLを入れます。src="…"の中は、手順１でコピーしたURLに置き換えます。widthとheightは、確認した寸法の数字に書き換えます。altには、写真の内容が分かる説明を書きます。

<figure class="kcj-photo-demo">
  <div class="kcj-photo-demo__frame">
    <img class="kcj-photo-demo__img"
      src="ここにコピーした画像のURLを貼る"
      alt="練習用の集合写真。７人が２列に並んでいる"
      width="1200" height="800">
  </div>
  <figcaption>練習用の写真です。</figcaption>
</figure>

３．基本のCSSを入れる（全体を見せる）

次はCSSです。HTMLのブロックには貼らず、サイトでCSSを管理している場所に入れます。WordPressのカスタマイザーには「追加CSS」があり、テーマのCSSより後に読み込まれます。［6］どこで管理しているか分からないときは、先に確認してから進めます。

.kcj-photo-demo {
  max-width: 40rem;
  margin: 0 auto 2rem;
}

.kcj-photo-demo .kcj-photo-demo__img {
  display: block;
  width: 100%;
  height: auto;
}

保存してプレビューすると、写真は縦横比を保ったまま、最大で幅40rem（基準が16pxなら640px）まで表示されます。全員を見せる集合写真なら、多くの場合はこの状態で足ります。

４．枠の形を決めたい場合（追加と置き換え）

「枠を横4：縦3にそろえたい」など、枠の形を決めたいときだけ進みます。まず、次の指定を追加します。

.kcj-photo-demo .kcj-photo-demo__frame {
  aspect-ratio: 4 / 3;
  background: #f2f0ea;
}

次に、手順３の.kcj-photo-demo .kcj-photo-demo__img { … }のまとまり全体を、次のコードに置き換えます。古い方を残したまま下に足すのではなく、波かっこの始まりから終わりまでを入れ替えます。

.kcj-photo-demo .kcj-photo-demo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

枠が横4：縦3になり、写真はその中に全体が収まります。写真が横3：縦2なら、上下に薄い色の余白が出ます。余白の色は、枠のbackgroundで変えられます。

５．切り取ってでも枠を埋めたい場合（１行の置き換え）

余白を出さずに枠を埋めたいときは、手順４のコードのobject-fit: contain;の１行だけを、次の２行に置き換えます。

  object-fit: cover;
  object-position: 50% 30%;

枠が埋まる代わりに、写真の一部が切れます。50% 30%は「左右は中央、上下は上寄り」の意味です。顔が切れないかを見ながら、数値を一つずつ変えて確かめます。WordPressの通常の画像ブロックにも、「縦横比」と「拡大縮小」の設定があります。拡大縮小の「Cover」は枠を埋めて一部を切り取り、「Contain」は全体を見せて余白が残る場合がある、という説明です。［7］コードを書かずに済む場面では、こちらも選択肢になります。項目名の表示は、言語やバージョンによって異なる場合があります。

元に戻すとき

練習ページなら、ブロックとCSSを削除すれば元に戻ります。既存のページで試した場合は、作業前に控えたコードに戻します。どれを変えたか分からなくならないよう、一つ変えるたびに保存して確認します。

07

PC・スマホで、
顔・伸び・余白を確かめる。

写真の収まり方は、画面の幅で変わります。パソコンで全員が見えていても、スマホで枠の形が変われば、切れ方も変わります。

パソコンのブラウザーでは、開発者ツールの表示幅を切り替える機能で、スマホに近い幅を確認できます。Chromeの「デバイスモード」は、モバイルでの見え方の概算で、実際の端末で動かしているわけではないと説明されています。［8］最後は、実際のスマホでも開いて見ます。

1. 狭いスマホの幅（例：360px前後）で、顔と頭の上が切れていないか。
2. 少し広いスマホの幅（例：390px前後）で、余白が不自然に増えていないか。
3. タブレットに近い幅（例：768px前後）で、写真と文章の並びが切り替わるときに、急に大きさが変わらないか。
4. パソコンの幅（例：1024px・1280px以上）で、写真が大きくなりすぎて粗く見えないか。

ここで挙げた幅は確認の目安で、すべてのサイトに共通する切り替え位置ではありません。サイトに画面幅で切り替える指定があるなら、その境目の前後も見ます。

• 全員の顔が見え、頭の上や手の先が切れていない。
• 丸いもの（ボールなど）が丸く見え、伸びやつぶれがない。
• 余白が、意図した場所と量になっている。
• 写真が文字やボタンに重なっていない。
• 拡大しすぎて、輪郭が粗くなっていない。
• 同じclass名を使う、ほかの写真に影響していない。

08

変わらない・ぼやけるときは。

CSSを入れても、収め方が変わらない

まず、保存したか、見ているページが合っているか、HTMLのclass名とCSSのclass名が一致しているかを確認します。そのうえで、ほかのCSSが同じ画像に、より強い指定をしていないかを見ます。当時のコードのように、画像に位置や幅、高さを個別に指定している構成では、新しく足した指定より元の指定が優先されている場合があります。反映されないときの調べ方は、第７回で詳しく扱います。

伸びたまま直らない

幅と高さが両方決まっているのに、object-fitが付いていない状態がよくあります。高さを決める必要がなければheight: autoに戻し、決める必要があるならcontainかcoverを指定します。

位置を変えても、切れた人が戻らない

coverで切れた部分は、object-positionで寄せても、反対側が切れるだけです。全員を見せたいなら、枠を写真の形に近づけるか、containにするか、写真自体を選び直します。

大きくすると、ぼやける

元の写真が小さいと、大きく表示したときに輪郭が粗くなります。CSSで表示を大きくしても、写真にない細かな情報は増えません。表示したい大きさに対して、十分な大きさの写真を用意することが先です。

人物の切り抜きから、普通の写真に変えた

背景のない切り抜き画像と、背景のある写真では、似合う配置が違います。切り抜き画像に合わせた重ね方や影の指定が残っていると、四角い写真の周りに不自然な影や重なりが出ることがあります。写真の種類が変わるときは、配置の指定も一緒に相談します。

今回の制作メモ

写真を替えるときは、
枠も一緒に見る。

２人の人物を集合写真１枚にしたいという依頼は、写真を差し替えるだけの作業に見えました。けれども、画像には元々の形があり、表示する場所にも形があります。その組み合わせを考え直さないと、写真はうまく収まりません。

全員を見せたいのか、枠を埋めたいのか。それを決めてから、height: auto、contain、coverのどれを使うかを選びます。迷ったら、まず元の写真を開き、何が写っているかを確かめるところから始めてください。

写真の形を知る。枠の形を決める。見せ方を選ぶ。違う幅でも顔を確かめる。この順番で、写真の崩れを一つずつ直していけます。

次回は、ページの横幅が狭いと感じたときの確認方法を取り上げます。画面、テーマ、セクション、中身のどこで幅が決まっているかを順に見ていきます。