🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

REFERENCEcss

css Documentation

📖 INDEX

# Align-content

# Animation-delay

# Animation-duration

# Animation-timing-function

# Background-color

# Background-image

# Background-position

# Background-repeat

# Background-size

# Basic-Selectors

# Child-Selectors

# Class-Selectors

# CSS-Attribute-Selectors

# Descendant-Selectors

# Flex-direction

# Grid-template-areas

# Grid-template-columns

# Grid-template-rows

# Include-Css-in-Html

# Justify-content

# Justify-items

# Letter-spacing

# Media-queries

# Pointer-events

# RefDeviceCharacteristics

# RefDimensions

# RefScreenDimensions

# Siblings-Selectors

# Text-transform

# Top, Right, Bottom, Left

# Transition-delay

# Transition-duration

# Transition-timing-function

# Universal-Selectors

# Including-Css-in-Html

LOADING ENGINE...

CSS Object Fit

Control how images fit into their containers. Master cover, contain, and fill to prevent distortion.

style.css

img {

width: 100%;

height: 100%;

object-fit: cover;

}

🖼️

object-fit.html

1 / 7

Tutor:When you define a specific width and height for an image container, the image inside often gets distorted if its aspect ratio doesn't match.

⭐ 0 EXP

CSS Fit Mastery

Unlock nodes by learning layout and image sizing.

Concept 1: Fill & Contain

By default, images use fill, which squishes them. contain preserves aspect ratio but leaves empty space.

System Check

Which value preserves aspect ratio but ensures the whole image is visible?

fillcontaincoverstretch

Community Holo-Net

Share Layouts

Created a perfect grid or hero section? Share your object-fit patterns.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Object Fit

Pascual Vila

Frontend Instructor.

The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

Why use object-fit?

By default, images stretch to fill their width and height, often distorting the aspect ratio. object-fit allows you to control this behavior, similar to how background-size works for background images.

Key Values

fill: The default. The image is resized to fill the given dimensions. If necessary, the image will be stretched or squished to fit.
contain: The image keeps its aspect ratio, but is resized to fit within the given dimension. The image will be letterboxed if the aspect ratio doesn't match.
cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
none: The image is not resized.
scale-down: The image is sized as if none or contain were specified, whichever results in a smaller concrete object size.

Common Use Cases

User Avatars: Use cover to ensure profile pictures fill a square or circular container without distortion.

Hero Images: Use cover for full-width banner images to ensure they cover the screen area regardless of device width.

Object Fit Glossary

object-fit: CSS property that specifies how a replaced element (like an image) should be resized to fit its container.
Aspect Ratio: The proportional relationship between an image's width and height. Preserving this prevents distortion.
Letterboxing: The practice of transferring film shot in a widescreen aspect ratio to standard-width video formats while preserving the film's original aspect ratio. In CSS contain, this results in empty space.
Replaced Element: An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet.