Correctly sizing images is a key part of creating engaging imagery on a website. Our tool allows designers and developers to scale images across different device sizes, whilst keeping the same proportion and showing the best part of the image.
The table below breaks down some common mobile, tablet and desktop devices. For each device, the sizes/dimensions are provided along with the suitable aspect ratio.
You can calculate the aspect ratio of an image by entering the width and the height of the image. The aspect ratio is then calculated and generated in the grey box below the text inputs.
Second, you can calculate new image dimensions by changing either the height or width of the image. When the calculated width changes, the calculated height is generated using the aspect ratio and is displayed in the calculated height input.
The calculated inputs are bi-directional, meaning editing the calculated height would change the calculated width using the aspect ratio.
The aspect ratio of an image is the proportion of the width and height of the image. In other words, the aspect ratio is the shape of the image.
An aspect ratio is usually shown in the form of a fraction and is the simplified number of the width and height.
For example, an image with a width of 100px and a height of 50px could be simplified to 2px width and 1px height with an aspect ratio of 2:1.
The aspect ratio of an image is calculated by dividing the width by the height. From there, we can calculate that there is X width for every Y height.
For example, if the width is 1920px and the height is 1080px then the aspect ratio equal decimal is equal to 1.77. This means that there is 1.77 width for every 1 height.
Using this aspect ratio information, we can calculate the new height of the image using the new width. For example, an image that is 160px wide has a height of 283px because 160 multiplied by 1.77 is 283.
The Aspect Ratio Calculator Tool does not use any measurement units to calculate the aspect ratio.
This is because the tool can be used for any measurement and converts the height or width of an image using the aspect ratio.
The tool does not convert one measurement into another so the tool is not limited to using one specific set of measurements.
The aspect ratio of an image can be very important as it decides the shape of the image and therefore how the image is displayed and cropped.
A correct image aspect ratio ensures the key parts of an image are shown to the user and not cropped or stretched.
In broader design, the aspect ratio determines how much space an element takes up on a page. With this in mind, aspect ratio is one important part of providing emphasis to specific content on a page and allowing users to focus on the key call to action.
The aspect ratio of an image can be set using the “aspect-ratio” property and setting a value such as “16 / 9” i.e. “aspect-ratio: 16/9;”
The property can be paired with “object-fit: cover;” to ensure the image takes up all the available space. If the image needs to be a fixed size and cropping may be an issue, “object-fit: contain;” would be more appropriate.
The grey aspect ratio preview box has a max width of 220px and a max height of 300px in order to prevent unusual aspect ratios from breaking the appearance of our website.
With this in mind, we preview the common aspect ratios, which cover the majority of the most prevalent use cases. If you are using an unusual aspect ratio, there is a high probability you already know what proportions your image should be.
If you have new tool idea or a suggestion for improvement, we would love to hear from you today.
Contact Us