Object Fit

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-contain

object-fit-cover

object-fit-fill

object-fit-scale

object-fit-none

<div class="row g-3 text-center small">
  <div class="col-6 col-md">
    <img src="https://images.unsplash.com/photo-1773828755374-0ee802d9f44b?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-1773828755374-0ee802d9f44b?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-1773828755374-0ee802d9f44b?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-1773828755374-0ee802d9f44b?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-1773828755374-0ee802d9f44b?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-1769798643655-e0f10f62c3fd?auto=format&fit=crop&w=1600&h=700&q=70" alt="How to choose the right ticket" class="w-100 rounded-3 object-fit-cover" style="height:110px">
  </div>
  <div class="col-4">
    <img src="https://images.unsplash.com/photo-1773829020694-413e879d2957?auto=format&fit=crop&w=1200&h=800&q=70" alt="Ten talks you should not miss 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-1780413462971-e245268a13d2?auto=format&fit=crop&w=800&h=800&q=70" alt="Our favourite tips for busy weeks" 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.

Aria Fischer

Frontend Engineer

<div class="d-flex align-items-center gap-3">
  <img src="https://images.unsplash.com/photo-1770097286213-6d6fc60f4cdf?auto=format&fit=crop&w=1200&h=800&q=70" alt="Aria Fischer" width="72" height="72" class="rounded-circle object-fit-cover border"> 
  <div>
    <div class="fw-semibold">
      Aria Fischer
    </div>
    <div class="small text-body-secondary">
      Frontend Engineer
    </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-1780413462971-e245268a13d2?auto=format&fit=crop&w=1200&h=800&q=70" alt="Experiences people talk about" 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-1560439514-0fc9d2cd5e1b?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-1560439514-0fc9d2cd5e1b?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-1560439514-0fc9d2cd5e1b?auto=format&fit=crop&w=1600&h=700&q=70" alt="Learn from the best, meet the rest" 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-1762968274962-20c12e6e8ecd?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-1774094453087-0207a0cd2309?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-1762968269894-1d7e1ce8894e?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.

Experiences people talk about
Big ideas, small rooms, real conversations
Ideas on stage, connections everywhere

<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-1762968274962-20c12e6e8ecd?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">Experiences people talk about</span></li>
  <li class="d-flex gap-2 align-items-center"><img src="https://images.unsplash.com/photo-1769755409781-9e8924c57362?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">Big ideas, small rooms, real conversations</span></li>
  <li class="d-flex gap-2 align-items-center"><img src="https://images.unsplash.com/photo-1560439514-0fc9d2cd5e1b?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">Ideas on stage, connections everywhere</span></li>
</ul>

10Product image with scale

object-fit-scale never enlarges a small image, it only shrinks large ones.

VIP pass

$66.89

<div class="border rounded-4 p-2 bg-body" style="max-width:16rem">
  <img src="../assets/img/product-4.svg" alt="VIP pass" class="w-100 object-fit-scale bg-body-tertiary rounded-3" style="height:180px"> 
  <div class="p-2">
    <div class="fw-medium">
      VIP pass
    </div>
    <div class="small">
      $66.89
    </div>
  </div>
</div>

11Cover inside a ratio box

ratio ratio-16x9 sets the frame; object-fit-cover fills it with the image.

A guide to the city for visiting attendees

<div class="ratio ratio-16x9 rounded-4 overflow-hidden" style="max-width:26rem">
  <img src="https://images.unsplash.com/photo-1769755409781-9e8924c57362?auto=format&fit=crop&w=800&h=800&q=70" alt="A guide to the city for visiting attendees" 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-1770097286213-6d6fc60f4cdf?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-1780413462971-e245268a13d2?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-1773828755374-0ee802d9f44b?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.

Isla Kowalski

Support Specialist

<div class="d-flex gap-3 align-items-end">
  <img src="https://images.unsplash.com/photo-1780413462971-e245268a13d2?auto=format&fit=crop&w=1600&h=700&q=70" alt="Isla Kowalski" width="110" height="150" class="rounded-3 object-fit-cover"> 
  <div>
    <div class="fw-semibold">
      Isla Kowalski
    </div>
    <div class="small text-body-secondary">
      Support Specialist
    </div>
  </div>
</div>

14Background-like image

An absolutely positioned image with object-fit-cover behaves like a cover background.

Learn, connect and get inspired

Early bird tickets save you up to forty percent until the end of the month.

<div class="position-relative rounded-4 overflow-hidden text-white p-4" style="min-height:170px">
  <img src="https://images.unsplash.com/photo-1560523159-fbe43c0b465f?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">Learn, connect and get inspired</h3>
    <p class="small mb-0">Early bird tickets save you up to forty percent until the end of the month.</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-1762968274962-20c12e6e8ecd?auto=format&fit=crop&w=1600&h=700&q=70" alt="Announcing our first keynote speakers" class="w-100 object-fit-none rounded-4 border" style="height:140px">

16Team grid

Team photos in equal circles, whatever the source image size.

Omar

Luna

Nadia

<div class="d-flex flex-wrap gap-3 text-center small">
  <div>
    <img src="https://images.unsplash.com/photo-1773828755374-0ee802d9f44b?auto=format&fit=crop&w=1200&h=800&q=70" alt="Omar" width="80" height="80" class="rounded-circle object-fit-cover d-block mb-1">Omar
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1560523159-fbe43c0b465f?auto=format&fit=crop&w=800&h=800&q=70" alt="Luna" width="80" height="80" class="rounded-circle object-fit-cover d-block mb-1">Luna
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1560523159-94c9d18bcf27?auto=format&fit=crop&w=1600&h=700&q=70" alt="Nadia" width="80" height="80" class="rounded-circle object-fit-cover d-block mb-1">Nadia
  </div>
</div>

17Card top image

A card with a fixed height cover image keeps all cards in a row aligned.

Behind the scenes: building the stage

Joining online: how the virtual pass works

<div class="row g-3">
  <div class="col-6">
    <div class="border rounded-4 overflow-hidden">
      <img src="https://images.unsplash.com/photo-1762968269894-1d7e1ce8894e?auto=format&fit=crop&w=800&h=800&q=70" alt="Behind the scenes: building the stage" class="w-100 object-fit-cover" style="height:110px">
      <div class="p-2 small fw-medium">
        Behind the scenes: building the stage
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="border rounded-4 overflow-hidden">
      <img src="https://images.unsplash.com/photo-1560523159-fbe43c0b465f?auto=format&fit=crop&w=1600&h=700&q=70" alt="Joining online: how the virtual pass works" class="w-100 object-fit-cover" style="height:110px">
      <div class="p-2 small fw-medium">
        Joining online: how the virtual pass works
      </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-1780413462971-e245268a13d2?auto=format&fit=crop&w=1200&h=800&q=70" alt="What our attendees asked us most" 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-1780413462971-e245268a13d2?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-1770097286213-6d6fc60f4cdf?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-1774094453087-0207a0cd2309?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>