レイアウト
object-position
置換要素のコンテンツをコンテナ内でどのように配置するかを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
object-top-left | object-position: top left; |
object-top | object-position: top; |
object-top-right | object-position: top right; |
object-left | object-position: left; |
object-center | object-position: center; |
object-right | object-position: right; |
object-bottom-left | object-position: bottom left; |
object-bottom | object-position: bottom; |
object-bottom-right | object-position: bottom right; |
object-(<custom-property>) | object-position: var(<custom-property>); |
object-[<value>] | object-position: <value>; |
例
基本的な例
object-left や object-bottom-right のようなユーティリティを使用して、置換要素のコンテンツをコンテナ内でどのように配置するかを指定します。
例の上にホバーすると、フルイメージが表示されます
object-top-left
object-top
object-top-right
object-left
object-center
object-right
object-bottom-left
object-bottom
object-bottom-right
<img class="size-24 object-top-left ..." src="/img/mountains.jpg" /><img class="size-24 object-top ..." src="/img/mountains.jpg" /><img class="size-24 object-top-right ..." src="/img/mountains.jpg" /><img class="size-24 object-left ..." src="/img/mountains.jpg" /><img class="size-24 object-center ..." src="/img/mountains.jpg" /><img class="size-24 object-right ..." src="/img/mountains.jpg" /><img class="size-24 object-bottom-left ..." src="/img/mountains.jpg" /><img class="size-24 object-bottom ..." src="/img/mountains.jpg" /><img class="size-24 object-bottom-right ..." src="/img/mountains.jpg" />カスタム値の使用
以下を使用してください object-[<value>] 構文 を設定するにはオブジェクトの位置完全にカスタムの値に基づいて
<img class="object-[25%_75%] ..." src="/img/mountains.jpg" />CSS変数には、以下も使用できます object-(<custom-property>) 構文
<img class="object-(--my-object) ..." src="/img/mountains.jpg" />これは単なる省略形です object-[var(<custom-property>)] 自動的に var() 関数を追加します。
レスポンシブデザイン
プレフィックスan object-position ユーティリティ md: のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 画面サイズ以上
<img class="object-center md:object-top ..." src="/img/mountains.jpg" />バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。