CSSのobject-positionが効かない｜画像の枠と切り抜く方向の確認手順

2026年9月23日2026年10月25日

CSSのobject-positionで画像の位置が変わらないときに、枠のサイズと切れる方向を確認する。

object-positionの数値を変えても、写真の位置が変わらない。左右には動くのに、上下には動かない。そんなときは、画像を表示する枠と、枠から切り抜かれている方向を分けて確認すると原因を絞れます。

この記事は、HTMLのimgタグで表示した画像が対象です。object-fit: coverで画像の一部を切り抜く場合を中心に、imgの幅・高さ、調整する方向、適用されているCSSを確認します。短い練習コードで違いを確かめ、自分の画像に必要な指定を選べるようにします。画像ファイル自体の編集は行いません。

背景として指定したbackground-imageの位置は、background-positionで調整します。

症状別の確認先

まず、位置を調整したい画像を1つ決めます。次の表から自分の症状に近い確認へ進んでください。途中で直った場合は、最後の保存後の確認まで進めば十分です。

症状	最初に確認すること
どちらの方向も変わらない	img自身の幅・高さとobject-fit
左右だけ、または上下だけ変わる	切り抜かれている方向
最小例では変わるのに実ページでは変わらない	実際に適用されたCSS

imgの枠と幅・高さ

ここでいう「枠」は、img要素そのものの表示領域です。画像を囲むdivやfigureなどの親要素とは分けて考えます。親要素とは、HTMLで対象の要素を囲んでいる要素のことです。

object-fitは、画像の中身をこの枠にどう収めるかを決めます。coverは画像の縦横比を保って枠を埋める指定です。枠に収まらない部分が切れ、その見せる位置をobject-positionで調整します。

幅と高さを指定した最小例

STEP

練習用の画像を用意する

本番のページを変える前に、練習用の新しいフォルダーで試します。同じフォルダーへ上下を見分けやすい正方形の画像を置き、次のsrcのsample.jpgを実際のファイル名（拡張子を含む）へ置き換えてください。altの説明も用意した画像に合わせます。

STEP

HTMLを保存して開く

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>画像の位置を確かめる練習</title>
  <style>
    .crop-image {
      display: block;
      width: 200px;
      height: 125px;
      object-fit: cover;
      object-position: 50% 0%;
    }
  </style>
</head>
<body>
  <img class="crop-image" src="sample.jpg" alt="青空と木">
</body>
</html>

コード全体をテキストエディターへ貼り付け、文字コードUTF-8でobject-position-check.htmlという名前にして画像と同じフォルダーへ保存します。末尾が.html.txtになっていないか確認し、保存したHTMLファイルをブラウザーで開いてください。画像が表示されないときは、位置の調整より先にsrcと実際のファイル名・保存場所を照合します。

STEP

上側・下側を切り替える

正方形の画像を横200px・縦125pxの枠に入れると、画像の高さが枠を超えるため、縦方向のどの部分を見せるか選べます。50% 0%では上側を残し、50% 100%へ変えると下側を残して表示します。上下で目印になるものがある画像だと、違いを見分けやすくなります。

同じ正方形の画像を横長の枠に表示し、50% 0%では上側、50% 100%では下側を見せる比較。

枠の大きさは変えず、object-positionの2つ目だけを0%から100%へ変えた比較です。

上側が見えたら、style内のobject-position: 50% 0%;をobject-position: 50% 100%;へ変更し、ファイルを保存してブラウザーを再読み込みします。下側へ切り替われば練習は完了です。本番の変更前には元のCSSを控え、対象imgの幅・高さ・coverから、自分の症状に必要な指定だけを確認します。

親要素とimgの高さの違い

親のdivを横200px・縦125pxにしても、imgがwidth: 100%; height: auto;なら、画像自身は元の縦横比に沿った高さになります。正方形の画像では、画像とimgの枠がどちらも200×200pxになるため、0～100%の位置指定を変えても見た目は変わりません。

親の大きさを使って画像を切り抜く場合は、親の高さを決め、imgの高さもその親に合わせます。これは先ほどとは別の書き方です。練習HTMLのbody内にあるimgを次のHTMLへ、style内の.crop-imageの指定全体を次のCSSへ置き換えます。headやbodyなどの外側の構造は残し、画像のファイル名とaltは用意した画像に合わせてください。

<div class="photo-frame">
  <img src="sample.jpg" alt="青空と木">
</div>

.photo-frame {
  width: 200px;
  height: 125px;
}

.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

.photo-frame imgは、photo-frameクラスが付いた要素の内側にあるimgを指定しています。object-fitとobject-positionも、そのimgに適用します。

imgの高さがautoのままの場合と、親に合わせて100%にした場合を比べると、次の違いがあります。

親を200×125pxにしても、imgのheightがautoなら200×200pxのまま。heightを100%にするとimgも200×125pxになる。

茶色の線は親の枠です。左右ともimgにはwidth: 100%、object-fit: cover、object-position: 50% 0%を指定しています。左は親からはみ出た部分も表示しています。

親の高さが決まっていない状態で、imgへheight: 100%だけを加えても、意図した高さになるとは限りません。パーセント指定の基準やheight: autoの違いは、CSSのwidth・height・max-width・min-heightの使い分けで確認できます。

親にoverflow: hiddenを付けるだけでも、外にはみ出た画像を隠せます。ただし、img自身の幅・高さが変わるわけではありません。object-positionを調整するときは、親の見た目だけでなくimgの枠を確認してください。

切り抜く方向と位置の指定

幅・高さとcoverが指定されていても、どの方向にも位置を変えられるとは限りません。切れる方向は、元画像と枠の縦横比の組み合わせで決まります。 元画像が横長か縦長かだけで判断しないことがポイントです。

たとえば、同じ正方形の画像でも、横長の枠では上下、縦長の枠では左右が切れます。正方形の枠なら、同じ比率なので切り抜きは起こりません。

同じ正方形の画像でも、横長の枠では上下、縦長の枠では左右が切れ、同じ比率の枠では切れない。

図は画像を中央に合わせた例です。位置の調整は0～100%の指定を前提にしています。

横・縦の指定順

パーセントを2つ書く場合は、1つ目が横、2つ目が縦です。次の4行は選択肢です。試したい1行だけを選び、対象imgのobject-positionの行と置き換えます。

object-position: 0% 50%;   /* 左側を見せる */
object-position: 100% 50%; /* 右側を見せる */
object-position: 50% 0%;   /* 上側を見せる */
object-position: 50% 100%; /* 下側を見せる */

最初は0%と100%で差を見て、変わる方向が分かったら30%や70%などへ調整すると分かりやすくなります。object-positionの初期値は50% 50%で、横・縦とも中央です。

右側を見せたい場合の100% 50%は、画像の右端を枠の右端に合わせる指定です。「数値を増やすと画像が右へずれる」と覚えるより、残したい側で考えると迷いにくくなります。

HOAI Point

coverで画像と枠がぴったり合っている方向は、位置を0～100%で変えても見た目が変わりません。左右だけ変わるなら横の指定、上下だけ変わるなら縦の指定を調整します。

枠と画像の比率が同じ場合

正方形の画像と正方形の枠のように比率が同じなら、coverでも画像全体がぴったり収まります。0% 0%から100% 100%へ変えても、表示位置は変わりません。

一部を切り抜いて見せたいなら、枠を横長・縦長に変えるなど、どの範囲を見せたいかに合わせて設計します。すでに必要な範囲が見えている場合は、そのままで構いません。

ここまでの「変わらない」という説明は、coverと0～100%の位置指定を使う場合です。px指定などで位置をずらし、画像で覆われない部分を作る使い方とは区別してください。

指定方法はMDNのobject-positionリファレンス、収め方の違いはMDNのobject-fitリファレンスでも確認できます。

適用されているCSSの確認

確認用の例では変わるのに、元のページでは変わらない場合は、書いたCSSとブラウザーが使っているCSSの違いを調べます。Chromeでは、次の順で確認できます。

対象のimgを選ぶ

ページ上の画像を右クリックし、「検証」を開きます。Elements（要素）に表示されたHTMLで、調整したいimgが選ばれていることを確認してください。外側のdivやfigureが選ばれていたら、その内側のimgを選びます。

StylesとComputedで指定の有無と最終値を確かめる

Styles（スタイル）は、対象の要素に適用されるCSSと上書きの状態を見る場所です。対象imgに書いたクラス名とobject-positionの指定を探します。見当たらなければ、クラス名・指定先・CSSファイルの読み込みを確認します。取り消し線が付いている指定や無効な値の表示があれば、別の指定による上書きや書き間違いを確認してください。

Computed（計算済み・計算値）は、ブラウザーが最終的に使っている値を見る場所です。width、height、object-fit、object-positionを1つずつ検索します。見つからないときはフィルターを消し、「Show all（すべて表示）」も確認します。

先ほどの最小例を変更せずに表示した場合は、次の値と照合します。

確認する項目	最小例の値
`width`	`200px`
`height`	`125px`
`object-fit`	`cover`
`object-position`	`50% 0%`

幅・高さが違えば、サイズを決めている指定へ戻ります。object-fitがcoverでなければ画像の収め方を、object-positionが50% 0%でなければ位置の指定をStylesで確認してください。下側を見せるために変更した後は、位置の値が50% 100%なら意図どおりです。

object-position: 50 0;のように、0以外の数値に必要な単位が抜けていないかも確認します。パーセントで指定する場合は50% 0%と書きます。

確認方法の詳細は、Chrome公式のCSSの表示・変更リファレンスを参照してください。ブラウザーの言語やバージョンで、タブ名や配置が異なることがあります。

画像の枠そのものが横並びのレイアウトで小さくなる場合は、CSSのFlexboxで画像が縮む原因と直し方へ進んでください。枠のサイズが意図どおりになってから、切り抜く位置を調整します。

保存後の表示確認

開発者ツール上の変更は、通常は一時的なものです。直った指定をCSSファイルや、普段使っている追加CSSの欄へ反映して保存します。

保存後はページを再読み込みし、次の3点を確認してください。

残したい顔や文字などが、意図した位置に見えている。
PC幅とスマートフォン幅の両方で、必要な部分が切れていない。
ほかの画像のサイズや位置まで変わっていない。

画面幅によって枠の比率が変わると、切れる方向や量も変わります。狭い画面だけ見え方が違う場合は、その幅でimgの大きさと位置を再確認します。

再読み込み後も必要な部分が見え、ほかの画像に影響がなければ調整は完了です。試して直らなかった指定は残さず、控えておいた元のCSSへ戻して保存・再読み込みします。元の表示に戻ったことを確認してから、次の原因を調べましょう。

よくある質問

画像を一切切り抜かず、枠の中に収めたい場合はどうしますか？: object-fit: containを検討します。画像全体を縦横比を保って表示するため、枠と比率が異なると余白ができます。余白を許容して全体を見せるか、coverで枠を埋めて一部を切り抜くかを、画像の用途に合わせて選びます。この記事の切れる方向の説明は、coverを使う場合のものです。
PCでは合うのに、スマートフォンだけ顔などが切れるのはなぜですか？: 画面幅によってimgの幅・高さや適用されるCSSが変わっている可能性があります。狭い幅でimgを選び、Computedの幅・高さとobject-positionを確かめます。元画像との比率が変われば切れる方向や量も変わるため、PCと同じ数値で同じ範囲が見えるとは限りません。
object-positionを変更すると、元の画像ファイルも切り抜かれますか？: いいえ。CSSで表示する位置を調整するもので、元の画像ファイルは変わりません。変更を取り消す場合は、控えておいたCSSへ戻して保存し、ページを再読み込みします。