Choose Aspect Ratio Calculate optimal viewing distance from screen size For a screen that is ( in cm ) diagonal and ( 4:3 16:9 21:9 ), the optimal viewing distance is between and, ideally around (based on screen height (4H-8H,6H)). I have a width: 240 I have aspect ratio: 2.40 I need to get the height based on those two variables. What's the formula? This online calculator finds screen dimensions - height, width and area, given the diagonal value and aspect ratio. Personoutline Timur schedule 2012-04-08 18:26:51 The display dimensions of a device, such as an HDTV or a laptop, are usually given as a screen 15' LCD, the diagonal size in inches.
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 Ratio Calculator
Simply put in the dimentions of your element and let the Aspect Ratio Calculator figure out the padding-bottom.
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
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
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.
Calculate Width And Height From Aspect Ratio Converter
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)
Calculate Width And Height From Aspect Ratio Formula
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
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
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
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
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.
Calculate Width And Height From Aspect Ratio Converter
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)
Calculate Width And Height From Aspect Ratio Formula
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
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
The wrapping
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 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 tag and hide it using CSS – as the browser will download images inside an 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.
If you scrolled down here, that means that you want more informations about aspect ratio or aspect ratio calculators.
What is Aspect Ratio and its usage?
Aspect ratio is a term that describes the ratio between the original size of a geometric shape and other sizes of them.
Nowadays Aspect Ratio term is used in common to describe images, video, movies and by electronic industry to describe the screen size of different devices such as TV, notebooks, tablets and even mobile phones. Wikipedia describes aspect ratio of an image like 'the proportional relationship between its width and its height'.
For electronic devices we have some default aspect ratios values that are used by manufacturers to describe their devices screen's.
How our aspect ratio calculator works?
In our aspect ratio calculators you can calculate aspect ratio value of an image or object, even new sizes for images that you want to resize.
You can use our aspect ratio calculator to convert the size of an image from original one to another sizes keeping the shape of the object and make him look natural without stretches.
If you want to calculate aspect ratio by your own, then maybe these forumlas will help you:
Aspect ratio calculation formula:
Aspect Ratio formula can be used in many ways in calculations.
This is the generic formula for calculating Aspect Ratio:
- Aspect Ratio = Width / Height
Now, let's say we want to calculate aspect ratio for an image that has 300px width and 150px height.
Aspect Ratio = Width / Height
Aspect Ratio = 300 / 150 = 2 / 1 => Aspect ratio of our image is 2:1
