April 14, 2022

Aspect Ratio Calculator

When creating responsive websites, sometimes it’s important to keep elements the same aspect ratio regardless of width. This is extra important for images that have a focal point like faces or a product to make sure the important parts of the image area always visible.

This handy tool can calculate a target element’s width and height based on a source width and height and also shows a method using :after to create a responsive element with CSS.

How it’s Calculated

With some basic math, we can get both the target width and height and value for padding-bottom based on the source width/height and the target width or height.

aspectRatio = (sourceWidth / sourceHeight);

Then we can get the adjusted width or adjusted height, depending on which value we know.

adjustedWidth = targetHeight * (sourceWidth / sourceHeight);
adjustedHeight = targetWidth * (sourceHeight / sourceWidth);

Getting the value for the responsive CSS padding-bottom value is as easy as:

paddingBottom = sourceHeight / (sourceWidth / 100);

… or, you can just let this tool do the math for you 😉


I’m a full-stack website developer and designer. Whether you’re looking for an online store, portfolio showcase or a blog, I can help make it stand out from the crowd. I love LAMP.