The aspect-ratio CSS property defines a preferred aspect ratio for an element's box. When you set aspect-ratio: 16 / 9 and only specify a width, the browser automatically calculates the height to maintain that ratio. This eliminates the need for the old "padding-bottom hack" and works natively in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+). It's especially useful for responsive video embeds, image galleries, and card layouts.

min-width and max-width constrain the element's width. If the container is narrower than min-width, the element overflows or stretches to its minimum. If the container is wider and the element would exceed max-width, it caps at the maximum. In both cases, the aspect-ratio still determines the height based on the actual rendered width. However, if min-height or max-height also come into play, they can override the aspect-ratio-calculated height, breaking the proportion.

When min-height is greater than the height calculated by aspect-ratio (based on the current width), the element takes the min-height value. This breaks the aspect ratio — the element becomes taller than the ratio would dictate. The width remains unchanged. This is visible in "Box 2" of our demo: at narrow container widths, the min-height kicks in and the box becomes proportionally taller. This behavior is by design: min/max constraints always take priority over aspect-ratio.

Absolutely! aspect-ratio works seamlessly with flexbox and CSS grid. In a grid layout, you can set aspect-ratio on grid items, and they will maintain their proportions as the grid tracks resize. Combined with minmax() in grid definitions and min/max constraints on items, you can create highly sophisticated responsive layouts. The aspect-ratio property is also valuable in flexbox for maintaining consistent card heights or image containers within flexible rows.

The padding-bottom hack (e.g., padding-bottom: 56.25% for 16:9) was a workaround that relied on percentage padding being calculated from the parent's width. The native aspect-ratio property is far superior: it's explicit and readable, doesn't require extra wrapper elements or pseudo-elements, works correctly with content inside the element, supports replaced elements like <img> and <video>, and integrates properly with min/max constraints. Browser support is now universal for modern browsers.

Combining min/max constraints with aspect-ratio gives you a "guarded" flexible element. For example, a video container with aspect-ratio: 16/9; min-height: 200px; max-height: 600px; will maintain 16:9 in most situations but won't shrink below 200px tall (preventing unreadable content) or grow above 600px (preventing excessive dominance on large screens). This creates a more robust responsive design where the element adapts gracefully across a wide range of viewport sizes.

Yes, box-sizing matters. With box-sizing: border-box (the Bootstrap default), padding and borders are included in the element's total width/height. The aspect-ratio is calculated on the content box by default. If you have thick borders or padding, the visual outer dimensions may not precisely match the ratio. For most practical purposes with thin borders and standard padding, the difference is negligible, but it's worth being aware of in pixel-precise designs.

Common use cases include: Responsive video embeds (fixed ratio, min-height for readability), Image galleries (consistent thumbnails with min/max to handle edge cases), Product cards in e-commerce (uniform image containers), Hero banners (wide ratio with max-height to not overwhelm), Avatar components (1:1 ratio with min/max for consistent sizing), and Dashboard widgets (flexible ratio with constraints to fit grid layouts). The combination allows designers to maintain visual harmony while accommodating diverse content and screen sizes.