# cover-box

> A curry-function which returns width and height for a child-box you want to cover a parent-box. Similar to css background-size:cover

Latest version **1.0.2** (published 2018-02-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install cover-box
pnpm add cover-box
yarn add cover-box
bun add cover-box
```

## 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.2 |
| Published | 2018-02-22 |
| First published | 2018-02-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Per Byhring |
| Maintainers | perbyhring |

## Links

- npm: https://www.npmjs.com/package/cover-box
- npm.io page: https://npm.io/package/cover-box

## Recent versions

- 1.0.2 (latest) — 2018-02-22
- 1.0.1 — 2018-02-22
- 1.0.0 — 2018-02-22

## README

# cover-box

A curry-function which returns width and height for a fixed-format child-element you want to cover a dynamic-format parent-element.

Similar to the css-rule `background-size: cover`.

## Install
`yarn add cover-box`

## Usage

### Import
`import coverBox from 'cover-box'`

### Direct Usage
```
coverBox(16,9)(1,1)
// > [1.7777777777777777, 1]
```

### As a curry-function
```
const cover169 = coverBox(16,9)

cover169(1280,720)
// > [1280, 720]

cover169(200,100)
// > [200, 112.5]

cover169(100,200)
// > [355.55555555555554, 200]

```

### Examples

#### A 16:9-`<div></div>` covering the viewport:

```
const mybox = document.querySelector('.my-box');

const setSize = () => {
  const size = coverBox(16,9)(window.innerWidth,window.innerHeight);
  mybox.style.width = `${size[0]}px`;
  mybox.style.height = `${size[1]}px`;
};

window.addEventListener('resize', setSize);
setSize();

```

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