Syntax
aspect-ratio: width / height;Examples
A Responsive Video Embed
The classic use case - maintaining a 16:9 ratio at any width.
.video-embed {
width: 100%;
aspect-ratio: 16 / 9; /* height is calculated automatically to maintain the ratio */
}
.video-embed iframe {
width: 100%;
height: 100%;
}Square Thumbnails and Image Placeholders
Reserving consistent space before an image loads, preventing layout shift.
.thumbnail {
width: 100%;
aspect-ratio: 1 / 1; /* always a perfect square */
object-fit: cover;
}Parameters and values
- aspect-ratio (width / height | auto): Sets a preferred proportional relationship between width and height
Best practices
- Use aspect-ratio instead of the old "padding-top percentage" hack for maintaining proportions - it is far more readable and intuitive
- Combine aspect-ratio with object-fit: cover on images/videos so content fills the box correctly without distortion
- Reserve consistent aspect-ratio space for images before they load, to prevent content from jumping around during page load (improves Cumulative Layout Shift)
- Remember explicit width/height attributes on <img>/<video> elements still matter for aspect-ratio to work correctly without JavaScript
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Length Units: px, %, em, rem
CSS offers several length units. px is an absolute, fixed unit. % is relative to the parent element. em is relative to the current element's font-size (compounding when nested). rem is relative to the root (html) element's font-size, avoiding the compounding problem of em, and is generally preferred for consistent, predictable sizing.Viewport Units: vh, vw, dvh
Viewport units are relative to the browser window's dimensions rather than a parent element. vh and vw represent 1% of the viewport height and width respectively. The newer dvh (dynamic viewport height) solves the classic mobile browser problem where vh included space later covered by the address bar.calc(), min(), max(), clamp()
These functions let you compute CSS values dynamically. calc() performs math between different units. min() and max() pick the smallest or largest of a list of values. clamp(min, preferred, max) is especially powerful for fluid, responsive sizing - it uses the preferred value but never goes below min or above max.Sizing: width, min/max-width
Beyond a fixed width, CSS offers min-width and max-width to set flexible boundaries - an element can shrink or grow within those limits. This is fundamental to responsive design, letting content adapt fluidly while never becoming unreadably narrow or unreasonably wide.
CSS offers several length units. px is an absolute, fixed unit. % is relative to the parent element. em is relative to the current element's font-size (compounding when nested). rem is relative to the root (html) element's font-size, avoiding the compounding problem of em, and is generally preferred for consistent, predictable sizing.Viewport Units: vh, vw, dvh
Viewport units are relative to the browser window's dimensions rather than a parent element. vh and vw represent 1% of the viewport height and width respectively. The newer dvh (dynamic viewport height) solves the classic mobile browser problem where vh included space later covered by the address bar.calc(), min(), max(), clamp()
These functions let you compute CSS values dynamically. calc() performs math between different units. min() and max() pick the smallest or largest of a list of values. clamp(min, preferred, max) is especially powerful for fluid, responsive sizing - it uses the preferred value but never goes below min or above max.Sizing: width, min/max-width
Beyond a fixed width, CSS offers min-width and max-width to set flexible boundaries - an element can shrink or grow within those limits. This is fundamental to responsive design, letting content adapt fluidly while never becoming unreadably narrow or unreasonably wide.