How the aspect ratio calculator works
Reduce whole-number dimensions by their greatest common divisor. For decimal dimensions, normalize them before reduction. Preserve the original width-to-height quotient when calculating a new size.
ratio = width ÷ heightFor a target width: target height = target width × original height ÷ original width.
Simplify 1920 × 1080 and resize it to 1280px wide
Dividing both dimensions by their greatest common divisor, 120, produces 16:9. A proportional width of 1280px produces a height of 720px.
Copyable code examples
Use these examples as a starting point, then match the values and assumptions to the rendered project.
.media {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}<img src="image.jpg" width="1920" height="1080" alt="">Using the result accurately
Use intrinsic media dimensions when available. Pair CSS aspect-ratio with a defined width or height and an appropriate object-fit rule for cropped media.
A matching container ratio does not guarantee uncropped content. object-fit, intrinsic media dimensions, borders, and layout constraints still affect rendering.
References: W3C CSS Sizing Level 4: preferred aspect ratios.