Beginner LevelCSS & Modern Layouts
How does object-fit control image and video sizing inside containers?
❓ Interview Prompt: Explain object-fit: cover, contain, fill, and none for responsive media elements.
object-fit controls how <img> or <video> content is resized to fit its container box:
•
`cover`: Scales to fill the container, maintaining aspect ratio. May crop edges. Best for hero images and card thumbnails.
•
`contain`: Scales to fit entirely inside the container, maintaining aspect ratio. May leave empty space (letterboxing).
•
`fill` (default): Stretches to fill the container, potentially distorting aspect ratio.
•
`none`: Renders at natural size regardless of container dimensions.
•
`object-position`: Controls the focal point when cropping (e.g.
object-position: top center).Code Implementation Example
css
.card-thumbnail {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
border-radius: 8px 8px 0 0;
}
.logo {
width: 120px;
height: 40px;
object-fit: contain; /* Show entire logo without cropping */
}💡Cover for card thumbnails, contain for logos.
🎯 Interview Key Takeaway
Use object-fit: cover for thumbnails and hero images; use contain for logos and icons that must display fully.
#object-fit#Images#Responsive#Beginner
Back to all CSS & Modern Layouts Questions→