Skip to content

Update dimensions, keep aspect ratio

Instructions

Put the original dimensions into the Original inputs
Fill in either of the New inputs
Watch as the power of science (and JavaScript) fills in the other New input

Original width

Original height

New width

New height

Aspect ratio: 1.245 / 1

Example use case

You have an existing image that’s 1280px by 986px:

<img
    src="/gulf-of-mexico.webp"
    width="1280" height="986"
    alt="…"
>

A design change requires the image to now be 1186px wide. What number do you write in the element’s height attribute?
```
<img
    src="/gulf-of-mexico.webp"
    width="1186" height="???"
    alt="…"
>
```