Media

Object Position

Can I use ?Can I use ?
classproperties
object-position:position / object:position / obj:positionobject-position: position
object-position:position|position / object:position|position / obj:position|positionobject-position: position position
obj:topobject-position: top
obj:bottomobject-position: bottom
obj:leftobject-position: left
obj:rightobject-position: right
obj:centerobject-position: center

Overview

The object-position CSS property specifies the alignment of the selected replaced element’s contents within the element’s box. Areas of the box which aren’t covered by the replaced element’s object will show the element’s background.

<div class="">
object-position:top;left
obj:top
object-position:top;right
obj:left
obj:center
obj:right
object-position:bottom|left
obj:bottom
object-position:bottom|right
<div class="p:20!">
    <div class="grid-cols:3! gap:1 min-w:640 min-h:426">
        <div class="flex flex:col w:full align-items:center">
            <div class="position:relative w:full aspect:640/426 ...">
                <img class="abs full object-fit:none object-position:top;left" src="/images/mountain.jpg">
                <div class="...">
                    <code class="...">object-position:top;left</code>
                    <code class="...">object-position:0%|0%</code>
                </div>
            </div>
        </div>
        <div class="flex flex:col w:full align-items:center">
            <div class="position:relative w:full aspect:640/426 ...">
                <img class="abs full object-fit:none obj:top" src="/images/mountain.jpg">
                <div class="...">
                    <code class="...">obj:top</code>
                    <code class="...">object-position:50%|0%</code>
                </div>
            </div>
        </div>
        <div class="flex flex:col w:full align-items:center">
            <div class="position:relative w:full aspect:640/426 ...">
                <img class="abs full object-fit:none object-position:top;right" src="/images/mountain.jpg">
                <div class="...">
                    <code class="...">object-position:top;right</code>
                    <code class="...">object-position:100%|0%</code>
                </div>
            </div>
        </div>
        <div class="flex flex:col w:full align-items:center">
            <div class="position:relative w:full aspect:640/426 ...">
                <img class="abs full object-fit:none obj:left" src="/images/mountain.jpg">
                <div class="...">
                    <code class="...">obj:left</code>
                    <code class="...">object-position:0%|50%</code>
                </div>
            </div>
        </div>
        <div class="flex flex:col w:full align-items:center">
            <div class="position:relative w:full aspect:640/426 ...">
                <img class="abs full object-fit:none obj:center" src="/images/mountain.jpg">
                <div class="...">
                    <code class="...">obj:center</code>
                    <code class="...">object-position:50%|50%</code>
                </div>
            </div>
        </div>
        <div class="flex flex:col w:full align-items:center">
            <div class="position:relative w:full aspect:640/426 ...">
                <img class="abs full object-fit:none obj:right" src="/images/mountain.jpg">
                <div class="...">
                    <code class="...">obj:right</code>
                    <code class="...">object-position:100%|50%</code>
                </div>
            </div>
        </div>
        <div class="flex flex:col w:full align-items:center">
            <div class="position:relative w:full aspect:640/426 ...">
                <img class="abs full object-fit:none object-position:bottom|left" src="/images/mountain.jpg">
                <div class="...">
                    <code class="...">object-position:bottom|left</code>
                    <code class="...">object-position:0%|100%</code>
                </div>
            </div>
        </div>
        <div class="flex flex:col w:full align-items:center">
            <div class="position:relative w:full aspect:640/426 ...">
                <img class="abs full object-fit:none obj:bottom" src="/images/mountain.jpg">
                <div class="...">
                    <code class="...">obj:bottom</code>
                    <code class="...">object-position:50%|100%</code>
                </div>
            </div>
        </div>
        <div class="flex flex:col w:full align-items:center">
            <div class="position:relative w:full aspect:640/426 ...">
                <img class="abs full object-fit:none object-position:bottom|right" src="/images/mountain.jpg">
                <div class="...">
                    <code class="...">object-position:bottom|right</code>
                    <code class="...">object-position:100%|100%</code>
                </div>
            </div>
        </div>
        
    </div>
</div>

Applying with functions

<div class="object-position:$(value)">...</div>

Master supports native CSS variables and functions, just add var(--key) or use shorthand$(key) for variables.

You can also use calc(expression), env(expression) and other CSS functions if the property supports it.

To learn more, see the Functions documentation.

Conditionally apply

States and selectors

<div class="object-position:top:hover">...</div>

Master supports all native CSS selectors, just add :hover, :disabled, chaining, combinators and other CSS selectors as usual.

To learn more, see the Selectors documentation.

Responsive breakpoints

<div class="object-position:top@sm">...</div>

Responsive breakpoints can be applied to all styles. Some available breakpoints are 3xs, 2xs, xs, sm,md, lg, xl, 2xl, 3xl, 4xl. Arbitrary breakpoints can be specified through comparison operators >, >=, <, <=.

To learn more, see the Breakpoints documentation.

<div class="object-position:top@print">...</div>

Master supports media types like print, screen, speech, all, and other media queries.

To learn more, see the Media Queries documentation.

Dark mode and color schemes

<div class="object-position:top@dark">...</div>

Master uses the selector html.dark to support color schemes. Now, you can easily fine-tune your style for the color schemes.

To learn more, see the Color Schemes documentation.



© Aoyue Design LLC.
Issue on this page
Edited byAronLola