With modern web development, you should include a fixed width and height along side an image, to hold space in the DOM to avoid CLS. But sometimes, you might find yourself with a much bigger image than you need, but still want to declare at the correct aspect ratio - for example when using next.js.

Enter the original image size, along with the reduced width you’re wanting your image at, and you’ll be presented with what the height in the correct aspect ratio should be.

Also calculated will be a padding-top aspect ratio hack. You can learn more about how to use this over at CSS Tricks.