midCSS
What is object-fit and when do you use it?
Updated Apr 28, 2026
Short answer
object-fit specifies how the contents of a replaced element (like <img> or <video>) should be resized to fit its container.
Deep explanation
It behaves similarly to background-size but for inline media. 'cover' scales the image to fill the box while preserving aspect ratio (cropping if necessary). 'contain' scales it to fit entirely within the box. 'fill' stretches it, ignoring aspect ratio.
Real-world example
Making a responsive image gallery where all thumbnails must be perfect squares without distorting the images.
Common mistakes
- Using object-fit without specifying both width and height on the image, rendering it ineffective.
Follow-up questions
- What is object-position?