CSS Aspect Ratio
The CSS aspect-ratio property gives responsive images, video, and containers a preferred width-to-height shape before their content finishes loading; at least one dimension must be automatic (auto) for it to affect preferred size. When both width and height are definite, those dimensions win.
How the CSS aspect-ratio property works
Write the ratio as width divided by height. A box with a width of 100% and a 16 / 9 ratio calculates its height from the available width, so the same component remains proportional across screen sizes.
.media { width: 100%; aspect-ratio: 16 / 9; }Use the property for layout boxes that need a stable shape, including media frames, embeds, placeholders, and reusable cards. It describes geometry, not a required pixel resolution.
Reserve image space with HTML dimensions
For an image, the HTML width and height attributes provide default dimensions and communicate its intrinsic proportion before the image loads. That lets the browser reserve the correct space and can reduce layout shift.
<img class="responsive-image" src="image.jpg" width="1920" height="1080" alt="Describe the image">.responsive-image { max-width: 100%; height: auto; }The attributes can render an image at their stated default dimensions, while this CSS makes it responsive. CSS can override the final rendered size, and the 1920 by 1080 relationship still gives the browser a useful 16:9 proportion before loading.
Contain or cover media inside the box
Use object-fit when the source media and the frame have different shapes. contain keeps the whole source visible and may leave empty space. cover fills the box, but it can crop edges of the source.
.media > img { width: 100%; height: 100%; object-fit: cover; }Choose contain for logos, diagrams, or any image that must remain complete. Choose cover for decorative photos or video thumbnails after checking that important content stays inside the crop.
Responsive image, video, and container examples
A 16:9 media wrapper can hold an image, a video, or an embedded player. Set the wrapper width to the available space, give it aspect-ratio: 16 / 9, and size its child to 100% width and height when it should fill that wrapper.
For a product card, use a square or portrait ratio on the image area so titles align even when source images vary. For a responsive video, reserve the frame first, then let the player fill it instead of calculating height in JavaScript.
Browser support and practical limits
Modern browsers support aspect-ratio for common layout use, but it does not select a crop, load a responsive source, or repair a missing intrinsic image size. Keep width and height attributes on images, test embeds with their real content, and provide a sensible fallback where older browser support matters.
For implementation details, read the MDN aspect-ratio reference and web.dev layout shift guidance.