https://github.com/spencermountain/fit-aspect-ratio
like math? me neither!
https://github.com/spencermountain/fit-aspect-ratio
Last synced: 11 days ago
JSON representation
like math? me neither!
- Host: GitHub
- URL: https://github.com/spencermountain/fit-aspect-ratio
- Owner: spencermountain
- Created: 2018-10-12T13:35:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:37:33.000Z (over 2 years ago)
- Last Synced: 2024-04-13T17:22:06.228Z (about 1 year ago)
- Language: JavaScript
- Size: 308 KB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
Awesome Lists containing this project
README
calculates widths/heights according to common ratios.
what's an aspect ratio *really*?
well, i'm actually not quite sure.
…
But fitting things using math,
just seems to be nice
and nobody knows why.
🌴
npm i fit-aspect-ratio
```js
const aspect = require('fit-aspect-ratio')
//calculate a missing width/height
aspect({ratio:'3:4', width:640})
// {width:300, height:480}
aspect({ratio:'widescreen', height:400}) // (2.35:1)
// {width:940, height:400}
//fit to the closest aspect ratio
let res = aspect({
width: 1280,
height: 722 // (almost 1280×720 )
})
// { closest:
// { names: [ '16:9', ... ],
// description: 'HD video',
// decimal: 1.77777 },
// width: 1280,
// height: 720
// }
// force a specific aspect ratio (assumes landscape)
aspect({ratio:'3:4', height:640, orientation:'portrait'}) //essentially '4:3'
// {width:480, height:640}
```
```html
fitAspect({ratio:'A4', height:8.5, orientation:'landscape'})
```
you can see the list of aspect-ratios we use [here](./src/aspects.js)
when fitting to an aspect ratio, `height` is adjusted, not width. (..scrolling down is easier?) This can be configured in future versions.
Demo
ok, ELI5 aspect-ratio
ratios are (typically) given as `width:height`
suppose our computer screen is `4:3`, our resolution could be `640x480`.
To calculate:
```js
// get a decimal representation
let decimal= 4/3 // 1.3333333
// this can get us our width..
width = 480 * decimal
// 640
// to get height, flip numerator/denominator
let inverse = 1/decimal // or '3/4'
height = 640 * inverse
// 480
```
this took me a good while...
## See also:
* [aspect-crop](https://github.com/spencermountain/aspect-crop) - cropping images based on this library
MIT
