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.