Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
CSS Object-fit & Aspect-ratio
object-fit controls how images and videos fill their containers, while aspect-ratio enforces consistent proportions. Together they solve the most frustrating responsive image problems - distortion, inconsistent heights, and layout shifts.
Object-fit & Aspect-ratio Properties
- object-fit: cover - Fills container, maintains ratio, crops overflow. The go-to for card images and hero images
- object-fit: contain - Fits entire image, maintains ratio, may letterbox. Use for product images and logos
- object-fit: fill - Stretches to fill (distorts). Rarely wanted. The default browser behavior
- object-fit: none - Original size, crops if larger than container. Useful for sprite-like images
- object-position - Where to crop from: object-position: top (show top of image), center center (default)
- aspect-ratio: 16/9 - Forces element to maintain 16:9 ratio. Works on any element, not just images
- aspect-ratio: 1 - Perfect square. Great for avatars, thumbnails, and icon containers
Object-fit & Aspect-ratio Code
/* Card grid with consistent image heights */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card img {
width: 100%;
aspect-ratio: 16 / 9; /* Consistent proportions */
object-fit: cover; /* Fill and crop */
object-position: center; /* Crop from center */
}
/* Video embed with aspect ratio */
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
background: black;
border-radius: 12px;
overflow: hidden;
}
/* Avatar sizes */
.avatar-sm { width: 32px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.avatar-md { width: 48px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.avatar-lg { width: 80px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
/* Product image: show entire image */
.product-img {
width: 100%;
aspect-ratio: 1; /* Square container */
object-fit: contain; /* Entire image visible */
background: #f8f8f8; /* Background for empty space */
padding: 16px;
}Tip
Use aspect-ratio: 16/9 + object-fit: cover as your default for ALL card images. This single 2-property combo eliminates: inconsistent card heights, stretched images, and the need for height: 200px hacks. It's the professional standard for image cards.
Mobile-first: start with mobile styles, enhance with min-width media queries
Common Mistake
Using object-fit: cover without overflow: hidden on the container. Cover crops the image, but if overflow isn't hidden, the cropped parts spill outside the container. Always pair object-fit: cover on the image with overflow: hidden on the containing element.
Practice Task
Build an avatar system: (1) .avatar with border-radius: 50%; aspect-ratio: 1; object-fit: cover in sizes sm (32px), md (48px), lg (80px), xl (120px), (2) A video embed container using aspect-ratio: 16/9; width: 100%; background: black, (3) Product card images using aspect-ratio: 1; object-fit: contain; background: #f8f8f8.
Quick Quiz
Key Takeaways
- object-fit controls how images and videos fill their containers, while aspect-ratio enforces consistent proportions.
- object-fit: cover - Fills container, maintains ratio, crops overflow. The go-to for card images and hero images
- object-fit: contain - Fits entire image, maintains ratio, may letterbox. Use for product images and logos
- object-fit: fill - Stretches to fill (distorts). Rarely wanted. The default browser behavior