CSS Tutorial

CSS object-fit

Last modified on: October 31, 2024

<h3>CSS <code>object-fit</code> Property</h3>
<p>The <code>object-fit</code> CSS property is ideal for controlling how images, videos, or other media fit within their containers, especially when the media and container have differing aspect ratios. It defines how the content should resize to fill its container.</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-fit: value;
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>Values for <code>object-fit</code></h3>
<p>Here are the primary values you can use with <code>object-fit</code>:</p>
<ol>
<li>
<p><strong><code>fill</code></strong>: Stretches the image or video to completely fill the container, regardless of aspect ratio. This may distort the media.</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-fit: fill;
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong><code>contain</code></strong>: Scales the media to fit within the container while maintaining its aspect ratio. If the aspect ratios differ, it will leave empty space on two sides.</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-fit: contain;
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong><code>cover</code></strong>: Scales the media to fill the container while maintaining its aspect ratio. The media might crop if its aspect ratio differs from the container's.</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-fit: cover;
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong><code>none</code></strong>: Keeps the media at its original size, regardless of container size. Overflow may occur if the media is larger than 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-fit: none;
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong><code>scale-down</code></strong>: Scales the media down to the smaller size between <code>none</code> and <code>contain</code>. This ensures the media fits only if it's larger than 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-fit: scale-down;
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ol>
<hr />
<h3>Practical Example</h3>
<p>Below is a practical example demonstrating different <code>object-fit</code> values applied to the same image.</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="fit-fill" alt="Fill"&gt;
    &lt;img src="image.jpg" class="fit-contain" alt="Contain"&gt;
    &lt;img src="image.jpg" class="fit-cover" alt="Cover"&gt;
    &lt;img src="image.jpg" class="fit-none" alt="None"&gt;
    &lt;img src="image.jpg" class="fit-scale-down" alt="Scale-down"&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;
}

.fit-fill {
    object-fit: fill;
}

.fit-contain {
    object-fit: contain;
}

.fit-cover {
    object-fit: cover;
}

.fit-none {
    object-fit: none;
}

.fit-scale-down {
    object-fit: scale-down;
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Conclusion</h3>
<p>The <code>object-fit</code> property gives you flexibility to control how images and videos fit within their containers, allowing you to create visually consistent designs while handling varied media dimensions. Perfect for responsive designs</p>

Web Technology View More