object-positionで画像をボックスに揃える位置を指定【CSS】

object-positionプロパティは、画像などの要素をボックスに揃える位置を指定したり、任意の位置でトリミングしたいときに使えるプロパティです。

{object-position: 位置;}

画像をボックスにフィットさせたり、トリミングさせたりする、object-fitプロパティと使うことが多いです。

関連記事
object-fitで画像のトリミングができる【CSS】

object-positionの値の指定方法

object-positionプロパティの値は半角スペースで区切って2つまで指定することができ、1つ目の値が水平方向、2つ目の値が垂直方向の位置を示します。

1つだけ指定した場合は水平方向と垂直方向に同じ値が適用されます。

指定する位置は%値や単位付きの数値、もしくはtop・right・bottom・leftなどのキーワードを使います。

任意の数値+単位	ボックス左上からの距離を横・縦の順でpxなどの単位をつけた数値で指定。マイナスの値も指定できる。
%値	ボックス左上からの位置を横・縦の順で%値を指定
top	垂直方向0%
right	水平方向100%
bottom	垂直方向100%
left	水平方向0%

この画像は原寸が幅1000pxで高さ700pxなんですが、幅と高さが250pxのボックスに表示させるためにobject-fitプロパティでcontainを指定しています。

img {
　object-fit:contain;
}

このとき、自動でボックスの中央に配置されますが、

object-positionプロパティでtopを指定すると、ボックスの上に揃い、

img {
　object-position:top;
}

object-positionプロパティでbottomを指定すると、ボックスの下に揃います。

img {
　object-position:bottom;
}

先ほどと同じ画像ですが、今度はobject-fitプロパティでcoverを指定しており、中央がトリミングされてボックスを埋めるように表示されています。

img {
　object-fit:cover;
}

object-positionプロパティでleftを指定すると中央ではなく、左端を基準にトリミングされ、

img {
　object-position:left;
}

object-positionプロパティでrightを指定すると、右端を基準にトリミングされます。

img {
　object-position:right;
}

top・right・bottom・leftなどのキーワードは垂直・水平の0%・100%を指定するものなので、細かい位置を指定するときは%値などを使うといいでしょう。