Skip to content
Search

Aspect ratio

lastmod 2022-12-14created 2019-10-3110 edits

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".

Standard aspect ratios

  • 1:1
  • 1.33:1 (4:3)
  • 1.77:1/1.78:1 (16:9)
  • 1.85:1 (37:20)
  • 2:1 (18:9)
  • 2.39:1 (21:9)

Other aspect ratios

  • 1.25:1 (5:4)
  • 1.37:1
  • 1.41:1
  • 1.44:1
  • 1.5:1 (3:2)
  • 1.6:1 (16:10)
  • 1.66:1 (5:3)
  • 1.73:1 (root 3:1)
  • 1.9:1
  • 2.055:1 (18.5:9)
  • 2.111:1 (19:9)
  • 2.167:1 (19.5:9)
  • 2.222:1 (20:9)

Aspect ratio conversion methods

Method

Name

Add black bars on both sides

Pillarbox

Stretch horizontally

Stretch

Crop top and bottom

Zoom

Add black bars on top and bottom

Letterbox

Stretch vertically

Anamorphic

Crop both sides

Pan & scan

Calculator in Python 

original_width = coco_object['images']['width']
original_height = coco_object['images']['height']

width = input_width # The size you want to change.
height = input_height # The size you want to change.

if width >= 1 and height >= 1:
    resize_width = width
    resize_height = height
elif width <= 0 and height >= 1:
    resize_height = height
    if aspect_ratio:
        resize_width = int(original_width*height/original_height)
    else:
        resize_width = original_width
elif width >= 1 and height <= 0:
    resize_width = width
    if aspect_ratio:
        resize_height = int(original_height*width/original_width)
    else:
        resize_height = original_height
else:
    assert width <= 0 and height <= 0
    resize_width = original_width
    resize_height = original_height

JavaScript version 

import {TypeException} from "@/exceptions";

export interface Size {
    width?: number;
    height?: number;
}

export function aspectRatio(original: Size, destination: Size) {
    const ow = original.width;
    const oh = original.height;
    if (typeof ow !== 'number') {
        throw new TypeException('The `original.width` argument is not a numeric type.');
    }
    if (typeof oh !== 'number') {
        throw new TypeException('The `original.height` argument is not a numeric type.');
    }

    const dw = destination.width;
    const dh = destination.height;

    if (dw && dh) {
        return {width: dw, height: dh} as Size;
    } else if (!dw && dh) {
        return {width: ow * dh / oh, height: dh} as Size;
    } else if (dw && !dh) {
        return {width: dw, height: oh * dw / ow} as Size;
    } else {
        return {width: ow, height: oh} as Size;
    }
}

CSS version

See also

Favorite site

author Zer0 sitemap