Free Tool

Aspect Ratio Calculator

Find a ratio, resize proportionally, and copy responsive CSS. Everything runs in your browser.

Original dimensions or ratio

Use whole numbers from 1 to 1,000,000. Enter image pixels or ratio terms such as 16 and 9.

Resize proportionally

Shape preview

Scaled to fit this frame. Extreme ratios may look like a thin line.

Simplified width : height

16 : 9

800 × 450 px

Responsive CSS

width: 100%;
height: auto;
aspect-ratio: 16 / 9;

Keep the shape as the size changes

Aspect ratio is width divided by height. A 1920 × 1080 image reduces to 16 : 9. At 800px wide, its proportional height is 800 × 9 ÷ 16 = 450px. Choose a known height to calculate width instead.

The calculated dimension is shown to six decimal places when needed. A separate nearest-pixel suggestion is provided for image exports; rounding can slightly change the ratio. The CSS keeps the original ratio without rounding it.

Using the generated CSS

Apply the declarations to an empty media wrapper or an image. At least one dimension must remain automatic for aspect-ratio to influence sizing. Content and minimum or maximum sizes can affect the final box. See the CSS Box Sizing specification for the sizing rules.

For an image whose natural shape should win after loading, use aspect-ratio: auto 16 / 9 with your own ratio. For a deliberately cropped thumbnail, use a fixed ratio with object-fit: cover; contain keeps the entire image visible with possible empty space. Read web.dev's aspect-ratio guide for examples.

Need fluid text sizing alongside responsive media? Try the CSS Clamp Calculator, or browse all frontend tools.