最終更新日

object-positionプロパティ

object-positionは、ボックス内のオブジェクトの位置を指定するプロパティです。

object-positionは、background-positionが背景画像に及ぼすものと同じ効果を与えます。

値は、「パーセント値」「長さ」「キーワード」の1~4個の組み合わせとなります。それぞれの値は半角スペースで区切って指定します。

値が1個の場合は、2個目の値は「center」の指定と同じです。

値が2個の場合は、水平方向の配置と垂直方向の配置です。値がパーセント値または長さの場合は、配置領域の左上からオブジェクトの左上までを示します。

値が3~4個の場合は、位置を表すキーワードと、そのキーワード位置からの距離を示します。なお、値が3個の場合、省略されている位置は「0」になります。

CSS3での変更点
・object-positionは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
50% 50% 置換要素 なし
説明
パーセント値 配置領域の幅または高さの相対位置と、オブジェクトの幅または高さの相対位置を合わせる。
長さ 「px」や「em」などのサイズで、水平または垂直方向の位置を指定する。
top 値が1個または2個の場合は上端を示す。それ以外は相対位置を示す基準としての上端を意味する。
right 値が1個または2個の場合は右端を示す。それ以外は相対位置を示す基準としての右端を意味する。
bottom 値が1個または2個の場合は下端を示す。それ以外は相対位置を示す基準としての下端を意味する。
left 値が1個または2個の場合は左端を示す。それ以外は相対位置を示す基準としての左端を意味する。
center 水平位置または垂直位置の数値が指定されない場合は、水平の位置が50%または垂直の位置が50%と同じ。
サンプルコード
object-position: left 10px top 15px;
object-position: right 3em bottom 10px;
object-position: 100% 100%;
参考文献:CSS Image Values and Replaced Content Module Level 3外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。