• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Object-fit

← Previous Next →

🔹 What is CSS object-fit?

The CSS object-fit property specifies how the content of a replaced element (like <img>, <video>, or <iframe>) should be resized to fit its container box.

It controls how the image or video scales and crops to fill the space without distorting the aspect ratio.

🔸 Values of object-fit

Value Description
fill Stretches the content to fill the container, ignoring aspect ratio (may distort).
contain Scales content to fit inside container while maintaining aspect ratio (may leave empty space).
cover Scales content to cover the entire container while maintaining aspect ratio (may crop).
none Keeps original size of content, ignoring container size.
scale-down Scales content down to the smaller of none or contain.

🔸 Example Usage

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

This ensures the image covers the container area without distortion, cropping if needed.

🔸 Visual Differences

  • fill: May stretch image, distorting it.

  • contain: Shows the whole image with letterboxing (empty space).

  • cover: Fills container, cropping overflow.

  • none: Shows image at original size, ignoring container.

  • scale-down: Like none or contain, whichever is smaller.

Practice Questions

Q1. Use object-fit: cover for a 200x200px image container.

Q2. Use object-fit: contain to show full image inside fixed size div.

Q3. Prevent image distortion using object-fit.

Q4. Use object-fit: fill to stretch image to container size.

Q5. Apply object-fit: none to display image at original size.

Q6. Use scale-down to fit image in container but keep original size if smaller.

Q7. Combine object-fit with fixed height and width on images.

Q8. Create circular images with object-fit: cover.

Q9. Use object-fit for responsive video thumbnails.

Q10. Use object-fit in a flexbox container with fixed image size.

CSS Object-fit Quiz

Q1: What does object-fit: cover do?

A. Stretches image ignoring aspect ratio
B. Scales image to cover container, cropping if necessary
C. Shows full image with empty space
D. Keeps original image size

Q2: Which value maintains the original size of an image?

A. fill
B. contain
C. none
D. scale-down

Q3: What is the difference between contain and cover?

A. Both crop image
B. contain fits whole image, cover fills container cropping excess
C. contain stretches, cover shrinks
D. No difference

Q4: Which value can cause image distortion?

A. fill
B. cover
C. contain
D. none

Q5: What does object-fit: scale-down do?

A. Always shrinks image
B. Always enlarges image
C. Uses smaller of none or contain
D. Stretches image

Q6: Can object-fit be used on background images?

A. Yes
B. No, use background-size instead
C. Only in Firefox
D. Only in SVG

Q7: Which elements can use object-fit?

A. Any HTML element
B. Replaced elements like <img>, <video>, <iframe>
C. Only <img>
D. Only block elements

Q8: How to prevent cropping with object-fit?

A. Use cover
B. Use contain
C. Use fill
D. Use none

Q9: Which value scales image to container ignoring aspect ratio?

A. contain
B. cover
C. fill
D. scale-down

Q10: What happens if object-fit is not set?

A. Image is cropped
B. Image is scaled to cover
C. Image behaves normally according to HTML rules
D. Image disappears
← Previous Next →
Login
Go Back Top