A simple utility function, and command line utility, for calculating an aspect
ratio based on width
and height
.
Via NPM
npm install --save calculate-aspect-ratio
Via Yarn
yarn add calculate-aspect-ratio
CLI
npm install -g calculate-aspect-ratio
There are two ways you can use this module. You can use it directly in your Javascript by importing it and calculating various aspect ratios where you need them.
I’ve also included a handy command line utility that you can use to determine the
aspect ratio by calling it and providing a width
and height
.
The import is useful in scenarios where you need to calculate the aspect ratio
when you have access to an assets width
and height
.
I’m currently using this to determine the aspect ratio of videos accessed via a
CMS and passing the aspect ratio to react-video-players
so they scale nicely in fluid layouts.
import calculateAspectRatios from 'calculate-aspect-ratio';
In addition to the method used to calculate the aspect ratio, I’ve also exposed
the method used to get the greatest common divisor. You can access that via the
gcd
export.
import { gcd } from 'calculate-aspect-ratio';
import calculateAspectRatio from 'calculate-aspect-ratio';
const aspectRatio = calculateAspectRatio(2880, 1800); // '8:5'
A simple utility command that you can run via the command line to return the
aspect ratio for a provided width
and height
.
$ aspectratio [options] [width] [height]
Option | Description |
---|---|
-V , --version |
output the version number |
-h , --help |
output usage information |
Argument | Type | Default |
---|---|---|
width |
Number | 1920 |
height |
Number | 1080 |
$ aspectratio 2880 1800 // Output -> Aspect ratio: 8:5
After making calculate-aspect-ratio
, I realized that in addition to the CLI
tool, it might be nice to make a site that makes it easy for non-developers –
and developers alike – to review and calculate various aspect ratios, as well
as reference common device resolutions. So, I made a handy tool that does just
that, offering a visual way to calculate and reference aspect ratios. I hope
you find it useful😀
Check out: https://aspectrat.io