No Login Data Private Local Save

aspect‑ratio with min/max Demo - Online Responsive Boxes

Developer Tools Educational aspect‑ratio CSS min‑width responsive
38
0
0
0
650px
Presets:
:
Quick:
No Min/Max
16:9 -- MIN MAX
Free aspect-ratio, no limits
Min Constraints
16:9 -- MIN MAX
min-width: 140px; min-height: 100px
Max Constraints
16:9 -- MIN MAX
max-width: 280px; max-height: 180px
Min + Max
16:9 -- MIN MAX
min + max on both axes
Aspect-ratio active Min constraint triggered Max constraint triggered
Generated CSS
.responsive-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* No min/max constraints */
}

The code above shows Box 1 configuration. Each box has different min/max settings.

Frequently Asked Questions
What is the CSS aspect-ratio property?
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.
How do min-width and max-width interact with aspect-ratio?
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.
What happens when min-height conflicts with aspect-ratio?
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.
Can I use aspect-ratio with flexbox and grid layouts?
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.
How does aspect-ratio compare to the old padding-bottom hack?
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.
Why would I use min-height and max-height together with aspect-ratio?
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.
Does box-sizing affect aspect-ratio calculations?
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.
What are common use cases for aspect-ratio with min/max in real projects?
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.
🔧 Related Tools