CSS Aspect Ratio Calculator [Tool]

So I’ve had to do a lot of stuff using aspect ratios lately, and I got tired of constantly having to do the math, so I’ve put together a CSS aspect ratio calculator (below) that should help save you a bit of time and energy.

Aspect Ratios Explained

The “aspect ratio” is the correlation between the height and width of an element.

Think of the way an image scales down its height in proportion to its width in responsive design.

Now, with images it’s easy to achieve, but when it comes to iframes, embeds and <div>’s it can be a little tricky.

Padding-bottom to the rescue

So the best way to make elements use an aspect ratio is to set the height to 0 and give the padding bottom as a percentage.

This is because when you set the padding-bottom as a percentage, it will be worked out as a percentage of the width.

So for example.

You have an empty <div> and it’s container has a width of 200px.

You set the padding-bottom to be 50%.

So it’s actual height will be 100px.

Because 50% of 200 is 100.

And what’s so powerful about this, is that when that then scales down to 146px, it’s height will be 73px (which is still in proportion to its width).

Making this super awesome for responsive web design.

So how do you work out the padding-bottom?

Well you can always use the calculator above – that’s why I made it. I’m always forgetting how to do the equation and it takes energy…but here’s how it works, if you want to do it manually:

h/(w/100)

“h” represents the height of your element and “w” represents the width.

So basically divide the width of your element by 100 and then divide the height of your element by that.

Easy enough but it takes some thinking about.

Wrapping it all up with some examples

So now you understand the core concept, here’s some examples of how to use it with the full CSS.

Example 1: Videos – YouTube, Vimeo etc. (most common)

This is the most common use of this method and you might not need to even work out the aspect ratio as there are some pretty common sizes (shown in the code below).

You basically create a wrapping <div> that does all the aspect ratio stuff.

Then place your video inside it with absolute positioning.

Example 2: Image slider (with varying image sizes)

This ones a little more complicated but is very, very useful.

I actually come up with this the other day when I was trying to build a slider for a small electronics store.

The situation was as follows:

• They’re a small company that need to be able to manage the site themselves.
• On a monthly basis, companies send them banners promoting offers on their products (i.e Panasonic might send them through a banner that advertises a 2 year warranty).
• They’re dealing with upwards of 30 companies – none of whom send through banners the same size.

So the problems are:

• Each banner needs to be sliced to fit the slider (as there is information all over the banners that cannot be cropped off).
• They have nobody in-house that has Photoshop skills (or Photoshop for that matter).
• They are a small company and want their monthly budget to go into work that will make them money (i.e SEO and social media marketing)

I needed to build an image slider that you could upload any sized image in without it looking crap or making the page jump all over the place as the slider does it’s thing.

So my initial thought was to use an image with a max width and height, inside a <div> with a set height, styled as a table cell, with the vertical-align set to middle.

The wrapping <div> would then have a background-color that would work as a border for images that don’t fit the right proportions of the slider.

That worked fine until it went on to mobile.

Because the height needed to respond to the width of the element.

So my next attempt was to try using the aspect ratio with a background-image.

Which worked perfectly and only took me about an hour to implement.

My slider is 750px wide by 274px tall.

So punch that into the aspect ratio calculator above and you get:

padding-bottom: 36.53333333333333%;

I then set:

• the background-color for the border when the image is the wrong dimensions.
• the background-size to contain so that the image will scale down horizontally and vertically.
• the background-position to 50% 50% so it will be centered horizontally and vertically.
• the background-repeat to no-repeat so it didn’t repeat the image in the spaces I want the background-color to fill.

After that it was just a case of outputting the image as a background-image on the specific slide.

Here’s my full code:

You’ll notice I also put the <img> inside the anchor tag with a class of hidden – this is because the browser wont download an elements background-image if it is not visible on the page.

Creating a flashing effect as the slide changes, whilst the browser downloads the image.

So a work around is to load in the actual image inside an <img> tag and hide it using CSS – as the browser will download images inside an <img> tag whether or not they are visible.

Final words

There’s a lot more examples of how you can use this aspect ratio method in web design, but this post wasn’t really about that. It was just to share this new tool and hopefully give an insight into how you can utilize the aspect ratio concept in your projects.

If you like this tool or found this useful feel free to bookmark the page and remember to share this on social media.

Last thing, I want to know how you use aspect ratio in your projects?

Have you made something different that you can share with us all in the comments?

Let me know.

Dan.