# @aspect-ratio/core

> This library tries to supply a responsive aspect ratio calculation for canvas elements which are located on top of a video elements.

Latest version **1.0.0** (published 2021-06-12) · 0 weekly downloads

## Install

```sh
npm install @aspect-ratio/core
pnpm add @aspect-ratio/core
yarn add @aspect-ratio/core
bun add @aspect-ratio/core
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-06-12 |
| First published | 2021-06-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Angel Fraga Parodi |
| Maintainers | angelfragap |

## Links

- npm: https://www.npmjs.com/package/@aspect-ratio/core
- Repository: https://github.com/angelfraga/aspect-ratio-js
- Homepage: https://github.com/angelfraga/aspect-ratio-js#readme
- Issues: https://github.com/angelfraga/aspect-ratio-js/issues
- npm.io page: https://npm.io/package/@aspect-ratio/core

## Recent versions

- 1.0.0 (latest) — 2021-06-12

## README

# @aspect-ratio/core

# Initial Motivation

This library tries to supply a responsive aspect ratio calculation for canvas elements which are located on top of a video elements.

Video elements add black borders in order to adjust the aspect ratio of the frame picture being displayed (displayed area). 
Since Video elements do not emit events about the disaplyed area's size this calculation must be done mostly via javascript or css.

# What library does

With JS we wouldn't be able to be full 100% responsive outbox , eg when oppening a sidebar no windows resize event get fired.

With CSS we could calculate aspect ratio, but mostly CSS solutions are just taking in count the width since they are based on padding.
That could end up in an element which overflow the size of its parent and making visible a scrollbar.

*I only found a solution taking in count the `height`* but only works if the element fits width the viewport size.

By using an iframe we can apply the last solution, forcing the iframe to fit with its parent. 
The nested window will fire the resize event once iframe's parent size changes.


# Install 

```
npm i @aspect-ratio/core
```

# Usage


```html

<div id="container">
	<div id="mask">
		<!-- content to apply aspect ratio -->
	</div>
</div>

```

## Typescript

```typescript
import { AspectRatio } from "./src/aspect-ratio";

const aspectRatio = new AspectRatio({
  container: document.querySelector("#container"),
  mask: document.querySelector("#mask"),
  minHeight: 90,
  minWidth: 160,
  ratio: "16/9",
  align: "center center"
});

```


# Collaboration
Please check README.md file in the repository


# License 

MIT License, please check the "LICENSE" file in the repository.

---
_Source: https://npm.io/package/@aspect-ratio/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._