Control how images and videos fit their containers. Here's how to use these properties.
object-fit Values#
Loading code block...
Common Use Cases#
Loading code block...
object-position#
Loading code block...
Portrait vs Landscape#
Loading code block...
Card Layouts#
Loading code block...
Gallery Layouts#
Loading code block...
Background Images Alternative#
Loading code block...
Video Handling#
Loading code block...
Responsive Adjustments#
Loading code block...
With CSS Custom Properties#
Loading code block...
Image Loading States#
Loading code block...
Fallback for Older Browsers#
Loading code block...
Best Practices#
Usage:
✓ Use cover for hero images
✓ Use contain for product images
✓ Set explicit dimensions
✓ Consider focal points
Performance:
✓ Use appropriate image sizes
✓ Combine with lazy loading
✓ Use srcset for responsive images
✓ Optimize image files
Accessibility:
✓ Always use alt text
✓ Consider important content position
✓ Test with various image ratios
✓ Ensure text over images is readable
Avoid:
✗ Stretching images (fill with different ratios)
✗ Cutting off important content
✗ Using background-image for content images
✗ Forgetting to set dimensions
Conclusion#
object-fit and object-position provide precise control over how replaced elements like images and videos display in their containers. Use cover for cropping to fit, contain for showing the entire image, and object-position to control the focal point.