Give the image a defined frame
Object-fit controls how replaced content such as an image fits its own content box. If the image simply uses its natural dimensions, there may be no visible fitting problem to solve. Start by deciding the display frame, such as a 16:10 project thumbnail or a square portrait, and then choose how the source should occupy it.
Choose cover when cropping is acceptable
Object-fit:cover preserves the source proportions while filling the frame, which can crop edges. That works well for many photographic thumbnails. It can be a poor choice for an interface screenshot when the cropped area contains navigation or important labels. A consistent card shape is not worth concealing the evidence a case study is trying to present.
Choose contain when the whole image matters
Object-fit:contain keeps the entire source visible inside the frame, leaving unused space when the aspect ratios differ. Give that space an intentional background. For example, a diagram can sit on a neutral panel without losing its annotations. Do not stretch the source with a fill behavior merely to avoid those margins.
Place the focal point deliberately
Object-position can move the fitted content within the frame. A portrait with a face near the top might need a different position from a centered product photograph. Test the chosen value at every supported frame ratio. A focal point that works in a wide card may still crop the subject awkwardly in a tall mobile presentation.
Know when CSS is not enough
A tightly cropped source cannot reveal details that were never included, and a screenshot may need a genuinely different composition for mobile. Export an alternate image when the design requires art direction. Keep the original available if a reader needs to inspect the full interface rather than inferring it from a small stylized preview.
Verify both pixels and meaning
Resize the layout while watching the important subject. Check that the image does not distort, key details remain visible and its alt text still matches the displayed information. Reserve the frame dimensions before loading. Then inspect the delivered file size: a good CSS crop does not reduce the number of source bytes downloaded.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.