Syntax
object-fit: cover | contain | fill;
object-position: value;Examples
object-fit: cover for Consistent Thumbnails
Filling a fixed-size box without distorting the image's proportions.
.thumbnail {
width: 300px;
height: 200px;
object-fit: cover; /* fills the box completely, cropping as needed */
}object-fit: contain and object-position
Showing an entire image without cropping, and controlling crop focus.
.logo {
width: 200px;
height: 100px;
object-fit: contain; /* shows the whole image, letterboxing if needed */
}
.portrait-crop {
object-fit: cover;
object-position: top; /* keeps the top of the image visible when cropping */
}Parameters and values
- cover (keyword): Fills the box completely, cropping the content as needed
- contain (keyword): Scales to fit entirely within the box, no cropping
- fill (keyword): Stretches to fill the box exactly, ignoring original proportions (default)
- object-position (position): Controls which part of the content remains visible when cropped
Best practices
- Use object-fit: cover for consistent thumbnail grids where images come in varying original proportions
- Use object-fit: contain for logos or images that must never be cropped, even if it means empty space around them
- Combine object-position with cover to control exactly which part of an image stays visible when cropping occurs, like keeping faces in frame
- Remember object-fit only applies to replaced elements like <img>, <video>, and <canvas> - it has no effect on regular elements like <div>
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Length Units: px, %, em, rem
CSS offers several length units. px is an absolute, fixed unit. % is relative to the parent element. em is relative to the current element's font-size (compounding when nested). rem is relative to the root (html) element's font-size, avoiding the compounding problem of em, and is generally preferred for consistent, predictable sizing.Viewport Units: vh, vw, dvh
Viewport units are relative to the browser window's dimensions rather than a parent element. vh and vw represent 1% of the viewport height and width respectively. The newer dvh (dynamic viewport height) solves the classic mobile browser problem where vh included space later covered by the address bar.calc(), min(), max(), clamp()
These functions let you compute CSS values dynamically. calc() performs math between different units. min() and max() pick the smallest or largest of a list of values. clamp(min, preferred, max) is especially powerful for fluid, responsive sizing - it uses the preferred value but never goes below min or above max.Sizing: width, min/max-width
Beyond a fixed width, CSS offers min-width and max-width to set flexible boundaries - an element can shrink or grow within those limits. This is fundamental to responsive design, letting content adapt fluidly while never becoming unreadably narrow or unreasonably wide.
CSS offers several length units. px is an absolute, fixed unit. % is relative to the parent element. em is relative to the current element's font-size (compounding when nested). rem is relative to the root (html) element's font-size, avoiding the compounding problem of em, and is generally preferred for consistent, predictable sizing.Viewport Units: vh, vw, dvh
Viewport units are relative to the browser window's dimensions rather than a parent element. vh and vw represent 1% of the viewport height and width respectively. The newer dvh (dynamic viewport height) solves the classic mobile browser problem where vh included space later covered by the address bar.calc(), min(), max(), clamp()
These functions let you compute CSS values dynamically. calc() performs math between different units. min() and max() pick the smallest or largest of a list of values. clamp(min, preferred, max) is especially powerful for fluid, responsive sizing - it uses the preferred value but never goes below min or above max.Sizing: width, min/max-width
Beyond a fixed width, CSS offers min-width and max-width to set flexible boundaries - an element can shrink or grow within those limits. This is fundamental to responsive design, letting content adapt fluidly while never becoming unreadably narrow or unreasonably wide.