Create a responsive image frame with CSS aspect-ratio

The aspect-ratio property preserves a frame’s width-to-height ratio as it resizes.

Create a test section with width:100% and aspect-ratio:16/9.

Place an image inside and set its width and height to 100%.

Apply object-fit:cover so it fills the frame without stretching.

If edge cropping is unsuitable, try contain and accept the empty space.

Test 1/1 for a square card and 4/3 for a conventional image.

Avoid an unnecessary fixed height so the ratio can control the frame.

View the example at widths of 320, 768, and 1200 pixels.

Make sure the main subject is not cropped out on mobile.

The result is correct when the frame keeps one ratio and the image never stretches.

Official sources

• MDN — aspect-ratio
• MDN — object-fit