Fit images into a frame with CSS without distortion

Forcing width and height independently can stretch faces and objects.

The object-fit property controls how an image sits inside its frame.

For a test, create a full-width frame with a height of 240px.

Apply width:100%, height:100%, and object-fit:cover to the image.

Cover fills the frame but may crop some image edges.

If showing the entire image matters more, try object-fit:contain.

Use object-position to move the important subject toward the center or another side.

Test the pattern with landscape, portrait, and square images.

At mobile width, confirm that the main subject has not been cropped away.

This property does not affect iframes; use it for images or video.

Official sources

• MDN — object-fit
• MDN — object-position