CSS Tips | 超実務コアCSSテクニック：ボックスモデル － object-position

Web APP CSS
スポンサーリンク

object-position を理解すると「どこを切り取るか」をコントロールできる

object-position は、object-fit とセットで使うと真価を発揮するプロパティです。
一言でいうと、「画像や動画の、どの部分を枠の中に見せるか」を決めるための座標指定です。

人物写真の顔が切れてしまう
商品写真の中心を見せたい
上の余白を多めに見せたい

こういう「見せたい位置」を細かくコントロールできます。

object-position の基本イメージ

枠の中に“カメラのフレーム”を動かす感覚

object-fit: cover; を使うと、画像は枠いっぱいに表示されますが、
そのときに「どの位置を中心にトリミングするか」を決めるのが object-position です。

img {
  object-fit: cover;
  object-position: center;
}
CSS

この場合は「中央を基準にトリミング」されます。

object-position は、次のような指定ができます。

キーワード指定
top, center, bottom, left, right
組み合わせて
top left, top center, bottom right など

パーセント指定
object-position: 50% 50%;（center と同じ）
object-position: 50% 20%;（横中央・縦は上寄り）

CSS での基本パターン

中央を基準にトリミング（よく使う基本形）

.thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
}
CSS

人物写真や風景写真など、
「全体のバランスを見せたい」場合の標準パターンです。

上側を優先して見せる（顔が切れないようにする）

.thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top;
}
CSS

人物写真で、顔が上の方にある場合に有効です。
top を指定すると、上側を優先して表示し、
下側が切れやすくなります。

左上・右下などを指定する

.thumb-left {
  object-fit: cover;
  object-position: left top;
}

.thumb-right-bottom {
  object-fit: cover;
  object-position: right bottom;
}
CSS

商品写真の一部だけを見せたいときや、
構図を意図的にずらしたいときに使えます。

パーセントで細かく調整する

.thumb {
  object-fit: cover;
  object-position: 50% 20%;
}
CSS

横は中央（50%）、縦は少し上寄り（20%）という意味です。
「顔がちょっと上にある」「被写体が少し下寄り」など、
微妙な位置調整が必要なときに便利です。

Tailwind CSS での object-position

Tailwind には object-position 用のユーティリティが用意されています。

代表的なものは次の通りです。

object-center
object-top
object-bottom
object-left
object-right
object-left-top
object-left-bottom
object-right-top
object-right-bottom

任意値も使えます。
object-[50%_20%] のように書くと、CSS の object-position: 50% 20%; と同じ意味になります。

Tailwind での基本パターン

中央トリミング

<img
  src="photo.jpg"
  class="w-full h-52 object-cover object-center"
/>
HTML

object-cover と object-center の組み合わせは、
サムネイル・カード・ヘッダー画像の鉄板パターンです。

上側を優先して見せる

<img
  src="photo.jpg"
  class="w-full h-52 object-cover object-top"
/>
HTML

人物写真で顔が切れないようにしたいときに、
object-top はかなり使えます。

右下を見せる

<img
  src="photo.jpg"
  class="w-full h-52 object-cover object-right-bottom"
/>
HTML

構図を意図的にずらしたいときや、
右下に重要な要素がある写真で使えます。

パーセント指定で微調整

<img
  src="photo.jpg"
  class="w-full h-52 object-cover object-[50%_20%]"
/>
HTML

Tailwind の任意値構文を使うと、
CSS と同じように細かい位置調整ができます。

object-fit と object-position の関係（ここが一番大事）

object-fit が「どう収めるか」、object-position が「どこを見せるか」

object-fit: cover; だけだと、
「枠いっぱいに埋める」ことはできますが、
どの部分を優先して見せるかはブラウザ任せ（基本は中央）です。

ここに object-position を組み合わせると、
「どこを中心にトリミングするか」を自分で決められます。

たとえば、人物写真の顔が上の方にある場合。

img {
  object-fit: cover;
  object-position: top;
}
CSS

Tailwind なら

<img class="object-cover object-top">
CSS

これだけで「顔が切れないサムネイル」が作れます。

実践例：カードのサムネイルで顔が切れないようにする

CSS版

.card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  border-radius: 8px 8px 0 0;
}
CSS

HTML

<img src="person.jpg" class="card-thumb">
HTML

人物写真の顔が上寄りにある場合、
object-position: top; を指定することで、
顔を優先して見せることができます。

Tailwind版

<img
  src="person.jpg"
  class="w-full aspect-[4/3] object-cover object-top rounded-t-lg"
/>
HTML

aspect-[4/3] で比率を固定し、
object-cover で枠いっぱいに、
object-top で上側を優先表示。

カードの高さも揃い、顔も切れず、
実務でかなり使う組み合わせです。

実践例：ロゴを中央にきれいに配置する

CSS版

.logo-box {
  width: 160px;
  height: 160px;
  background: #f7fafc;
}

.logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
CSS

Tailwind版

<div class="w-40 h-40 bg-gray-100">
  <img src="logo.png" class="w-full h-full object-contain object-center">
</div>
HTML

ロゴ全体を見せたいので object-contain、
位置は中央なので object-center。
object-position は object-fit とセットで考えると理解しやすいです。

深掘り：object-position を使いこなすコツ

画像の「どこが重要か」を意識する

人物なら顔
商品なら中央の本体
風景なら地平線や建物

「どこを見せたいか」を先に決めて、
それに合わせて top / center / bottom / left / right を選ぶと、
デザインの質が一段上がります。

aspect-ratio と組み合わせて「比率＋位置」をセットで設計する

比率を固定する
aspect-ratio / aspect-*

見せる位置を決める
object-position / object-*

この2つをセットで考えると、
どんな画面幅でも崩れないサムネイル・カード・ヘッダーが作れます。

パーセント指定で「あとちょっと」を詰める

キーワード（top / center / bottom）だけでは足りないとき、
object-position: 50% 30%; のようにパーセントで微調整します。

Tailwind なら

<img class="object-cover object-[50%_30%]">
HTML

「顔がほんの少し上にある」
「被写体が少し右寄り」
こういう微妙なズレを詰められるのは、
デザインの仕上がりにかなり効いてきます。

まとめ

object-position は、
「画像や動画のどの部分を枠の中に見せるか」を決める座標指定です。

object-fit: cover や object-fit: contain と組み合わせることで、
サムネイル・カード・ヘッダー・ロゴ表示などのクオリティが一気に上がります。

CSS では
object-position: center;
object-position: top;
object-position: 50% 20%;

Tailwind では
object-center
object-top
object-[50%_20%]

もし「この画像レイアウトで顔が切れる」「ここを見せたいのにうまくいかない」みたいな具体的なケースがあれば、その HTML を見ながら一緒にベストな object-fit / object-position の組み合わせを設計してみましょう。

スポンサーリンク
タイトルとURLをコピーしました