Object Fit Guide
Control image fitting
Source Input
Processed Output
What is the Object Fit Guide?
Images inside fixed-size containers either distort, crop, or letterbox depending on object-fit. This guide shows exactly how cover, contain, fill, none, and scale-down behave, and generates the CSS with object-position for choosing which part of the image stays visible when cropping.
Frequently Asked Questions (FAQ)
Q: Cover or contain — which should I use?
Cover fills the box and crops overflow (hero images); contain shows the whole image and letterboxes (product photos).
How to Use the Object Fit Guide
- 1Paste your input into the editor above — or start from the preloaded example.
- 2Adjust any options, then click Run to process instantly in your browser.
- 3Review the output panel, then copy, download, or save it as a reusable snippet.