Bird
Raised Fist0
CSSmarkup~5 mins

Object fit in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Object fit helps images or videos fill their container nicely without stretching or cutting off important parts.

You want an image to cover a box without distortion.
You have a video inside a fixed-size area and want it to fit well.
You want to show a profile picture inside a circle without stretching.
You want to keep an image's aspect ratio but fill the container.
You want to control how an image fits inside a card or gallery.
Syntax
CSS
object-fit: fill | contain | cover | none | scale-down;

fill stretches the image to fill the container (may distort).

contain fits the whole image inside the container, keeping aspect ratio.

cover fills the container and crops if necessary, keeping aspect ratio.

none displays the image at its original size.

scale-down compares none and contain and uses the smaller size.

Examples
This makes the image fill the box and crop if needed, keeping its aspect ratio.
CSS
img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}
This fits the whole image inside the box without cropping, may leave empty space.
CSS
img {
  width: 200px;
  height: 150px;
  object-fit: contain;
}
This stretches the image to exactly fill the box, which can distort it.
CSS
img {
  width: 200px;
  height: 150px;
  object-fit: fill;
}
Sample Program

This page shows three boxes with the same image but different object-fit settings. You can see how the image changes shape and cropping inside each box.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Object Fit Example</title>
  <style>
    .container {
      width: 300px;
      height: 200px;
      border: 2px solid #333;
      margin-bottom: 1rem;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
    .cover img {
      object-fit: cover;
    }
    .contain img {
      object-fit: contain;
      background-color: #eee;
    }
    .fill img {
      object-fit: fill;
    }
  </style>
</head>
<body>
  <section>
    <h2>object-fit: cover</h2>
    <div class="container cover">
      <img src="https://via.placeholder.com/400x300" alt="Example image">
    </div>
  </section>
  <section>
    <h2>object-fit: contain</h2>
    <div class="container contain">
      <img src="https://via.placeholder.com/400x300" alt="Example image">
    </div>
  </section>
  <section>
    <h2>object-fit: fill</h2>
    <div class="container fill">
      <img src="https://via.placeholder.com/400x300" alt="Example image">
    </div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Use object-fit only on replaced elements like <img>, <video>, or <canvas>.

For accessibility, always include alt text on images.

Combine object-fit with fixed width and height on the container for best results.

Summary

Object fit controls how images or videos fill their containers.

Use cover to fill and crop, contain to fit inside without cropping, and fill to stretch.

It helps keep your page looking neat and images clear without distortion.

Practice

(1/5)
1. What does the CSS property object-fit: cover; do to an image inside a container?
easy
A. It fits the entire image inside the container without cropping.
B. It stretches the image to fill the container, possibly distorting it.
C. It fills the container completely, cropping parts if needed.
D. It repeats the image to fill the container.

Solution

  1. Step 1: Understand object-fit: cover; behavior

    This property makes the image fill the container completely, cropping parts if the aspect ratio differs.

  2. Step 2: Compare with other options

    Unlike contain which fits without cropping, cover crops to fill fully.

  3. Final Answer:

    It fills the container completely, cropping parts if needed. -> Option C

  4. Quick Check:

    Cover = fill and crop [OK]
Hint: Cover fills and crops; contain fits without cropping [OK]
Common Mistakes:
  • Confusing cover with contain
  • Thinking cover stretches without cropping
  • Assuming cover repeats the image
2. Which of the following is the correct CSS syntax to make an image fit inside its container without cropping or distortion?
easy
A. object-fit: stretch;
B. object-fit: fill;
C. object-fit: crop;
D. object-fit: contain;

Solution

  1. Step 1: Identify the property for fitting without cropping

    object-fit: contain; fits the entire image inside the container without cropping or distortion.

  2. Step 2: Check other options

    fill stretches, stretch is invalid, and crop is not a valid value.

  3. Final Answer:

    object-fit: contain; -> Option D

  4. Quick Check:

    Contain = fit inside without cropping [OK]
Hint: Contain fits fully inside; fill stretches [OK]
Common Mistakes:
  • Using invalid value 'stretch'
  • Confusing fill with contain
  • Thinking crop is a valid value
3. Given this HTML and CSS, what will the image look like in the browser?
<div style="width: 200px; height: 100px;">
  <img src="image.jpg" style="width: 100%; height: 100%; object-fit: contain;">
</div>
medium
A. The entire image fits inside the container without cropping, possibly leaving empty space.
B. The image fills the container and may be cropped.
C. The image stretches and distorts to fill the container.
D. The image repeats to fill the container.

Solution

  1. Step 1: Analyze the container and image size

    The container is 200px wide and 100px tall. The image is set to 100% width and height of the container.

  2. Step 2: Understand object-fit: contain; effect

    This makes the image scale to fit inside the container fully without cropping or distortion, preserving aspect ratio. Empty space may appear if aspect ratios differ.

  3. Final Answer:

    The entire image fits inside the container without cropping, possibly leaving empty space. -> Option A

  4. Quick Check:

    Contain = fit inside with possible empty space [OK]
Hint: Contain fits fully, may leave space; cover crops [OK]
Common Mistakes:
  • Assuming image will crop with contain
  • Thinking image will distort with contain
  • Confusing contain with fill
4. You want an image to fill its container without distortion, but it currently stretches oddly. Which CSS fix will solve this?
img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
medium
A. Change object-fit to cover.
B. Remove width and height properties.
C. Change object-fit to contain.
D. Add object-position: center;.

Solution

  1. Step 1: Identify the problem with object-fit: fill;

    This stretches the image to fill container width and height, causing distortion.

  2. Step 2: Use object-fit: cover; to fix distortion

    cover fills the container while preserving aspect ratio, cropping if needed, preventing distortion.

  3. Final Answer:

    Change object-fit to cover. -> Option A

  4. Quick Check:

    Cover fills without distortion by cropping [OK]
Hint: Use cover to fill without distortion, fill stretches [OK]
Common Mistakes:
  • Using fill causes distortion
  • Removing width/height breaks layout
  • Thinking object-position fixes distortion
5. You have a video inside a 400px by 300px container. You want the video to fill the container fully without distortion, but keep the center visible if cropping happens. Which CSS is best?
video {
  width: 100%;
  height: 100%;
  object-fit: ?
  object-position: ?
}
hard
A. object-fit: fill; and object-position: left;
B. object-fit: cover; and object-position: center;
C. object-fit: contain; and object-position: top;
D. object-fit: none; and object-position: center;

Solution

  1. Step 1: Choose object-fit to fill without distortion

    cover fills the container fully, preserving aspect ratio, cropping if needed.

  2. Step 2: Set object-position to keep center visible

    object-position: center; ensures cropping keeps the center area visible.

  3. Final Answer:

    object-fit: cover; and object-position: center; -> Option B

  4. Quick Check:

    Cover + center = fill fully, crop center visible [OK]
Hint: Cover fills and crops; center keeps main part visible [OK]
Common Mistakes:
  • Using contain leaves empty space
  • Using fill distorts video
  • Ignoring object-position for cropping focus