CSS Tutorial

CSS object-position

Last modified on: October 31, 2024

<h3>CSS <code>object-position</code> Property</h3>
<p>The CSS <code>object-position</code> property works alongside <code>object-fit</code> to control the positioning of replaced elements like images and videos inside their containers. This property is particularly useful when you want to center or reposition media within a container after applying an <code>object-fit</code> style.</p>
<hr />
<h3>Basic Syntax</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>img, video {
    object-position: x y;
}
</code></pre>
</div>
</div>
</div>
</div>
<p>Here, <code>x</code> and <code>y</code> represent the horizontal and vertical positioning, respectively, which can be specified in percentages, pixels, or keywords.</p>
<hr />
<h3>Common Values for <code>object-position</code></h3>
<ol>
<li>
<p><strong>Centering</strong> (default: <code>50% 50%</code>): Centers the media in the container.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>img {
    object-position: 50% 50%;
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>Top Left</strong> (<code>0% 0%</code>): Aligns the top-left corner of the media to the container's top-left.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>img {
    object-position: 0% 0%;
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>Bottom Right</strong> (<code>100% 100%</code>): Aligns the bottom-right corner of the media to the container's bottom-right.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>img {
    object-position: 100% 100%;
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>Custom Positioning</strong> (e.g., <code>20% 80%</code>): Allows custom positioning by specifying x and y offsets.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>img {
    object-position: 20% 80%;
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ol>
<hr />
<h3>Practical Example</h3>
<p>Below is an example that demonstrates different values for <code>object-position</code>, allowing the same image to be displayed in varied positions within identical containers.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="container"&gt;
    &lt;img src="image.jpg" class="pos-center" alt="Center"&gt;
    &lt;img src="image.jpg" class="pos-top-left" alt="Top Left"&gt;
    &lt;img src="image.jpg" class="pos-bottom-right" alt="Bottom Right"&gt;
    &lt;img src="image.jpg" class="pos-custom" alt="Custom"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>CSS</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.container {
    display: flex;
    gap: 10px;
}

img {
    width: 150px;
    height: 100px;
    border: 1px solid #ccc;
    object-fit: cover; /* To maintain aspect ratio while filling container */
}

.pos-center {
    object-position: 50% 50%;
}

.pos-top-left {
    object-position: 0% 0%;
}

.pos-bottom-right {
    object-position: 100% 100%;
}

.pos-custom {
    object-position: 20% 80%;
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Conclusion</h3>
<p>The <code>object-position</code> property gives fine control over the placement of images and videos within their containers, making it possible to focus on specific areas of media elements. This property is especially powerful in responsive design, where precise positioning can enhance the user experience across different screen sizes.</p>

Web Technology View More