When designing a web page, assets like images are allotted a given “space” and this space is a box (as in the, css box model). For dynamic websites and CMS where users or an admin can upload their own images, it is good to specify the required sizes for the images to be uploaded but it is even more important to specify the required aspect ratio since users usually have images that are smaller or larger than the required size.

The aspect ratio of a geometric shape is the ratio of its sizes in different dimensions. For example, the aspect ratio of a rectangle is the ratio of its longer side to its shorter side – the ratio of width to height, when the rectangle is oriented as a "landscape". [*]

The aspect ratio for an image is the ratio of its width to its height. Thus, aspect ratio concerns the relationship of the width to the height, not an image's actual size.

Using an image with the correct aspect ratio enables the image to fill the “space” of a box of specific dimensions, regardless of the actual size of the image which could be larger or in most cases you'll see smaller than the recommended size. Any other aspect ratio would skew and distort the image and make the page design look bad.

The best solution would be to edit a new image to the same aspect ratio as the recommended. And then resize it proportionally. But it’s not as straightforward as it may seem.

If the recommended image size was 2000px by 1200px, and the new image to be uploaded was maybe 2250px by 1000px, we have to crop one of the sides to fit the recommended aspect ratio (simply resizing would stretch/skew the image).

To find a new variable (width or height) to crop to you need to make the value for the larger side unknown (our new image would then be ?px by 1000px) and equate it to the values of the recommended image size.

	(2000/1200) = (?/1000)
	? * 1200 = 2000 * 1000
	? = 2000000/1200
	? = 1667px (approximately)

As a PRO-TIP, It helps to also keep art direction in mind when choosing a portion to crop . We then proceed to crop our new image to a width of 1667px while keeping the height at 1000px to keep it in sync with the aspect ratio of our space.