【CSS Modules】object-positionプロパティの使い方

object-positionプロパティは、置き換え要素（replaced elements）の内容が、その要素のコンテンツボックス内でどのように配置されるかを制御するプロパティです。具体的には、<img> タグで表示される画像や<video> タグで表示される動画、あるいはbackground-image プロパティで背景画像が設定された要素などにおいて、その内容の表示位置を調整するために使用されます。

このプロパティは、主に object-fit プロパティと組み合わせて利用されます。object-fit プロパティが、画像や動画がコンテンツボックスの領域にどのようにフィットするか（例えば、cover で全体を覆うように拡大縮小したり、contain でアスペクト比を保ちつつ収まるようにしたり）を決定するのに対し、object-position プロパティは、そのフィットした内容のどの部分をコンテンツボックス内に表示するかを細かく指定できます。

値は、水平方向と垂直方向のオフセットを、キーワード（例: top, bottom, left, right, center）や、パーセンテージ、あるいは長さの単位（例: px, em）で指定します。例えば、object-position: 0% 0%; はコンテンツの左上隅を表示し、object-position: 50% 50%; はコンテンツの中央を表示します。また、object-position: top right; のようにキーワードを組み合わせて指定することも可能です。

Webページのデザインにおいて、画像や動画のトリミングや配置を柔軟にコントロールし、意図した通りの見栄えを実現するために非常に有効です。特にレスポンシブデザインで、様々な画面サイズに合わせてメディアコンテンツの表示を最適化する際に役立ちます。

Copy
1img {
2  object-position: 50% 50%;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません