https://github.com/dzucconi/proportional-scale

Proportionally scales width and height values
https://github.com/dzucconi/proportional-scale

proportional responsive-images scale

Last synced: 6 days ago
JSON representation

Proportionally scales width and height values

• Host: GitHub
• URL: https://github.com/dzucconi/proportional-scale
• Owner: dzucconi
• License: mit
• Created: 2019-11-15T13:13:56.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-10-23T04:18:12.000Z (14 days ago)
• Last Synced: 2024-10-24T15:01:27.827Z (12 days ago)
• Topics: proportional, responsive-images, scale
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/proportional-scale
• Size: 1.41 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# proportional-scale

[![Travis (.org)](https://img.shields.io/travis/dzucconi/proportional-scale)](https://travis-ci.org/dzucconi/proportional-scale) [![npm](https://img.shields.io/npm/v/proportional-scale)](https://www.npmjs.com/package/proportional-scale) ![NPM](https://img.shields.io/npm/l/proportional-scale)

Proportionally scales a rectangle. Pass it the width and height, along with a desired max-height/width or both. Get back the proportionally scaled dimensions along with a padding-bottom value: useful in creating scalable responsive image containers.

## Getting started

```

yarn add proportional-scale

```

```typescript

import { scale } from "proportional-scale";

const { width, height, paddingBottom, scale } = scale({

  width: 800,

  height: 600,

  maxWidth: 400

});

// => {

//   width: 400,

//   height: 300,

//   paddingBottom: "75%",

//   scale: 0.5

// };

```