プログラミング

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

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

{object-position: 位置;}

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

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

object-positionの値の指定方法

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

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

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

top 垂直方向0%
right 水平方向100%
bottom 垂直方向100%
left 水平方向0%

画像をボックスの上や下に揃える

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

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

コーヒーを飲む女性
object-positionプロパティでtopを指定すると、ボックスの上に揃い、

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

画像の任意の位置をトリミング

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

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

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

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

Leave a Comment