Object fit utilities decide how an image or video fills its box: object-fit-contain shows all of it, object-fit-cover fills the box and crops, object-fit-fill stretches, object-fit-scale only shrinks and object-fit-none keeps the natural size. Responsive variants like object-fit-md-cover switch per breakpoint.
1All object-fit values
contain, cover, fill, scale and none on the same wide image in square frames.
object-fit-containobject-fit-coverobject-fit-fillobject-fit-scaleobject-fit-none<div class="row g-3 text-center small">
<div class="col-6 col-md">
<img src="https://images.unsplash.com/photo-1757524492552-d47a66a2b63e?auto=format&fit=crop&w=1600&h=700&q=70" alt="contain" width="120" height="120" class="bg-body-tertiary border rounded-3 d-block object-fit-contain mx-auto"><code>object-fit-contain</code>
</div>
<div class="col-6 col-md">
<img src="https://images.unsplash.com/photo-1757524492552-d47a66a2b63e?auto=format&fit=crop&w=1600&h=700&q=70" alt="cover" width="120" height="120" class="bg-body-tertiary border rounded-3 d-block object-fit-cover mx-auto"><code>object-fit-cover</code>
</div>
<div class="col-6 col-md">
<img src="https://images.unsplash.com/photo-1757524492552-d47a66a2b63e?auto=format&fit=crop&w=1600&h=700&q=70" alt="fill" width="120" height="120" class="bg-body-tertiary border rounded-3 d-block object-fit-fill mx-auto"><code>object-fit-fill</code>
</div>
<div class="col-6 col-md">
<img src="https://images.unsplash.com/photo-1757524492552-d47a66a2b63e?auto=format&fit=crop&w=1600&h=700&q=70" alt="scale" width="120" height="120" class="bg-body-tertiary border rounded-3 d-block object-fit-scale mx-auto"><code>object-fit-scale</code>
</div>
<div class="col-6 col-md">
<img src="https://images.unsplash.com/photo-1757524492552-d47a66a2b63e?auto=format&fit=crop&w=1600&h=700&q=70" alt="none" width="120" height="120" class="bg-body-tertiary border rounded-3 d-block object-fit-none mx-auto"><code>object-fit-none</code>
</div>
</div>2Uniform product grid
object-fit-cover makes images of any shape fill equal square tiles.
<div class="row g-2">
<div class="col-4">
<img src="https://images.unsplash.com/photo-1670589953882-b94c9cb380f5?auto=format&fit=crop&w=1600&h=700&q=70" alt="Five things we learned this year" class="w-100 rounded-3 object-fit-cover" style="height:110px">
</div>
<div class="col-4">
<img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=1200&h=800&q=70" alt="Looking back at a busy season" class="w-100 rounded-3 object-fit-cover" style="height:110px">
</div>
<div class="col-4">
<img src="https://images.unsplash.com/photo-1627141234469-24711efb373c?auto=format&fit=crop&w=800&h=800&q=70" alt="How we sold a lake cottage in nine days" class="w-100 rounded-3 object-fit-cover" style="height:110px">
</div>
</div>3Logos with contain
object-fit-contain shows the whole logo inside a fixed box without cropping.
<div class="d-flex flex-wrap gap-2">
<img src="../assets/img/logo-5.svg" alt="Partner logo" width="130" height="70" class="object-fit-contain border rounded-3 p-2 bg-body"> <img src="../assets/img/logo-6.svg" alt="Partner logo" width="130" height="70" class="object-fit-contain border rounded-3 p-2 bg-body"> <img src="../assets/img/logo-7.svg" alt="Partner logo" width="130" height="70" class="object-fit-contain border rounded-3 p-2 bg-body">
</div>4Round avatar from a wide photo
object-fit-cover with rounded-circle crops a non-square image into a circle.
Zoe Rossi
Project Manager
<div class="d-flex align-items-center gap-3">
<img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=1200&h=800&q=70" alt="Zoe Rossi" width="72" height="72" class="rounded-circle object-fit-cover border">
<div>
<div class="fw-semibold">
Zoe Rossi
</div>
<div class="small text-body-secondary">
Project Manager
</div>
</div>
</div>5Hero banner crop
A fixed height banner with object-fit-cover keeps its height on every screen.
<img src="https://images.unsplash.com/photo-1771366260867-7e07094579d7?auto=format&fit=crop&w=1200&h=800&q=70" alt="Local agents who know every street" class="w-100 rounded-4 object-fit-cover" style="height:160px">6Fill stretches the image
object-fit-fill ignores the aspect ratio, which distorts the picture - compare with cover.
<div class="d-flex flex-wrap gap-3 small">
<figure class="mb-0">
<img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?auto=format&fit=crop&w=800&h=800&q=70" alt="Stretched" width="200" height="90" class="object-fit-fill rounded-3 border d-block">
<figcaption class="mt-1">fill</figcaption>
</figure>
<figure class="mb-0">
<img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?auto=format&fit=crop&w=800&h=800&q=70" alt="Cropped" width="200" height="90" class="object-fit-cover rounded-3 border d-block">
<figcaption class="mt-1">cover</figcaption>
</figure>
</div>7Responsive object fit
object-fit-contain object-fit-md-cover shows the full image on phones and crops it from md.
<img src="https://images.unsplash.com/photo-1513584684374-8bab748fbf90?auto=format&fit=crop&w=1600&h=700&q=70" alt="Moving made simple" class="w-100 rounded-4 border bg-body-tertiary object-fit-contain object-fit-md-cover" style="height:180px">8Gallery with mixed shapes
A two row mosaic: each cell is a fixed height and the images cover it.
<div class="row g-2">
<div class="col-8">
<img src="https://images.unsplash.com/photo-1748063578185-3d68121b11ff?auto=format&fit=crop&w=1200&h=800&q=70" alt="Gallery large" class="w-100 rounded-3 object-fit-cover" style="height:200px">
</div>
<div class="col-4 d-flex flex-column gap-2">
<img src="https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery small 1" class="w-100 rounded-3 object-fit-cover" style="height:96px"> <img src="https://images.unsplash.com/photo-1513584684374-8bab748fbf90?auto=format&fit=crop&w=1600&h=700&q=70" alt="Gallery small 2" class="w-100 rounded-3 object-fit-cover" style="height:96px">
</div>
</div>9Thumbnail list
Small square thumbnails with object-fit-cover in a list of articles.
Local agents who know every street
Moving made simple
<ul class="list-unstyled mb-0 d-grid gap-2">
<li class="d-flex gap-2 align-items-center"><img src="https://images.unsplash.com/photo-1748063578185-3d68121b11ff?auto=format&fit=crop&w=1600&h=700&q=70" alt="" width="52" height="52" class="rounded-2 object-fit-cover flex-shrink-0"><span class="small">Local agents who know every street</span></li>
<li class="d-flex gap-2 align-items-center"><img src="https://images.unsplash.com/photo-1771366260867-7e07094579d7?auto=format&fit=crop&w=1200&h=800&q=70" alt="" width="52" height="52" class="rounded-2 object-fit-cover flex-shrink-0"><span class="small">Buy, sell or rent with confidence</span></li>
<li class="d-flex gap-2 align-items-center"><img src="https://images.unsplash.com/photo-1613977257363-707ba9348227?auto=format&fit=crop&w=1600&h=700&q=70" alt="" width="52" height="52" class="rounded-2 object-fit-cover flex-shrink-0"><span class="small">Moving made simple</span></li>
</ul>10Product image with scale
object-fit-scale never enlarges a small image, it only shrinks large ones.
Studio apartment
$13.85
<div class="border rounded-4 p-2 bg-body" style="max-width:16rem">
<img src="../assets/img/product-4.svg" alt="Studio apartment" class="w-100 object-fit-scale bg-body-tertiary rounded-3" style="height:180px">
<div class="p-2">
<div class="fw-medium">
Studio apartment
</div>
<div class="small">
$13.85
</div>
</div>
</div>11Cover inside a ratio box
ratio ratio-16x9 sets the frame; object-fit-cover fills it with the image.
<div class="ratio ratio-16x9 rounded-4 overflow-hidden" style="max-width:26rem">
<img src="https://images.unsplash.com/photo-1627141234469-24711efb373c?auto=format&fit=crop&w=800&h=800&q=70" alt="A beginner's guide to getting started" class="object-fit-cover">
</div>12Square ratio cards
ratio-1x1 with object-fit-cover gives every card a square cover.
<div class="row g-2">
<div class="col-4">
<div class="ratio ratio-1x1">
<img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1600&h=700&q=70" alt="Cover 1" class="object-fit-cover rounded-3">
</div>
</div>
<div class="col-4">
<div class="ratio ratio-1x1">
<img src="https://images.unsplash.com/photo-1627141234469-24711efb373c?auto=format&fit=crop&w=1200&h=800&q=70" alt="Cover 2" class="object-fit-cover rounded-3">
</div>
</div>
<div class="col-4">
<div class="ratio ratio-1x1">
<img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?auto=format&fit=crop&w=1600&h=700&q=70" alt="Cover 3" class="object-fit-cover rounded-3">
</div>
</div>
</div>13Portrait crop
A tall fixed width and height frame with object-fit-cover turns a landscape photo into a portrait.
Nadia Harlow
Customer Success
<div class="d-flex gap-3 align-items-end">
<img src="https://images.unsplash.com/photo-1513584684374-8bab748fbf90?auto=format&fit=crop&w=1600&h=700&q=70" alt="Nadia Harlow" width="110" height="150" class="rounded-3 object-fit-cover">
<div>
<div class="fw-semibold">
Nadia Harlow
</div>
<div class="small text-body-secondary">
Customer Success
</div>
</div>
</div>14Background-like image
An absolutely positioned image with object-fit-cover behaves like a cover background.
Sell faster with an expert at your side
Book viewings online and take a 3D tour before you leave the house.
<div class="position-relative rounded-4 overflow-hidden text-white p-4" style="min-height:170px">
<img src="https://images.unsplash.com/photo-1783125127199-860da9744dcc?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover">
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-50">
</div>
<div class="position-relative">
<h3 class="h5 fw-bold">Sell faster with an expert at your side</h3>
<p class="small mb-0">Book viewings online and take a 3D tour before you leave the house.</p>
</div>
</div>15None keeps original pixels
object-fit-none shows the image at its natural size, cropped to the frame centre.
<img src="https://images.unsplash.com/photo-1757524492552-d47a66a2b63e?auto=format&fit=crop&w=1600&h=700&q=70" alt="Ten questions to ask at a viewing" class="w-100 object-fit-none rounded-4 border" style="height:140px">16Team grid
Team photos in equal circles, whatever the source image size.
Ella
Sofia
Ruby<div class="d-flex flex-wrap gap-3 text-center small">
<div>
<img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?auto=format&fit=crop&w=1200&h=800&q=70" alt="Ella" width="80" height="80" class="rounded-circle object-fit-cover d-block mb-1">Ella
</div>
<div>
<img src="https://images.unsplash.com/photo-1757524492552-d47a66a2b63e?auto=format&fit=crop&w=800&h=800&q=70" alt="Sofia" width="80" height="80" class="rounded-circle object-fit-cover d-block mb-1">Sofia
</div>
<div>
<img src="https://images.unsplash.com/photo-1783125127199-860da9744dcc?auto=format&fit=crop&w=1600&h=700&q=70" alt="Ruby" width="80" height="80" class="rounded-circle object-fit-cover d-block mb-1">Ruby
</div>
</div>17Card top image
A card with a fixed height cover image keeps all cards in a row aligned.
Renting versus buying: what makes sense now
What really affects the value of your home
<div class="row g-3">
<div class="col-6">
<div class="border rounded-4 overflow-hidden">
<img src="https://images.unsplash.com/photo-1513584684374-8bab748fbf90?auto=format&fit=crop&w=800&h=800&q=70" alt="Renting versus buying: what makes sense now" class="w-100 object-fit-cover" style="height:110px">
<div class="p-2 small fw-medium">
Renting versus buying: what makes sense now
</div>
</div>
</div>
<div class="col-6">
<div class="border rounded-4 overflow-hidden">
<img src="https://images.unsplash.com/photo-1757524492552-d47a66a2b63e?auto=format&fit=crop&w=1600&h=700&q=70" alt="What really affects the value of your home" class="w-100 object-fit-cover" style="height:110px">
<div class="p-2 small fw-medium">
What really affects the value of your home
</div>
</div>
</div>
</div>18Contain on a dark stage
object-fit-contain on bg-dark: a lightbox style viewer that never crops.
<div class="bg-dark rounded-4 p-2">
<img src="https://images.unsplash.com/photo-1748063578185-3d68121b11ff?auto=format&fit=crop&w=1200&h=800&q=70" alt="Buying a building plot: what to check first" class="w-100 object-fit-contain" style="height:200px">
</div>19Video poster tile
A cover image in a 21x9 ratio with a play icon.
<div class="ratio ratio-21x9 rounded-4 overflow-hidden" style="max-width:28rem">
<img src="https://images.unsplash.com/photo-1771366260867-7e07094579d7?auto=format&fit=crop&w=1200&h=800&q=70" alt="Video poster" class="object-fit-cover">
<div class="d-flex align-items-center justify-content-center">
<span class="bg-body rounded-circle shadow d-inline-flex align-items-center justify-content-center fs-4 text-primary" style="width:56px;height:56px"><i class="bi bi-play-fill" aria-hidden="true"></i></span>
</div>
</div>20Compare before and after
Two cover images side by side with labels.
Before
After<div class="row g-2 small">
<div class="col-6 position-relative">
<img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1200&h=800&q=70" alt="Before" class="w-100 rounded-3 object-fit-cover" style="height:130px"><span class="position-absolute top-0 start-0 m-2 badge text-bg-dark">Before</span>
</div>
<div class="col-6 position-relative">
<img src="https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?auto=format&fit=crop&w=1200&h=800&q=70" alt="After" class="w-100 rounded-3 object-fit-cover" style="height:130px"><span class="position-absolute top-0 start-0 m-2 badge text-bg-primary">After</span>
</div>
</div>