In Web & Mobile Design
What is object-fit?
Object-fit is a CSS property that defines how images and videos scale to fit their content box.
When to use object-fit?
- Responsive media cards, avatars, and galleries
- To avoid distortion and maintain aspect ratiosWhen not to use object-fit? - When you must crop or position media precisely without scalingWhat is the anatomy of object-fit?
- Values: cover, contain, fill, none, scale‑down
- Interaction with width, height, and aspect‑ratio
- Fallbacks for unsupported contexts