Solid-aspect-ratio NPM

Creates a component with a proportional relationship between its width and height.

ratio = width / height

Internally, TailwindCSS to achieve the intended aspect ratio.

npm bundle size (scoped) npm bundle size (scoped version) Libraries.io dependency status for latest release, scoped npm package NPM

Demo

https://solid-aspect-ratio.netlify.app/

Source available in example

Installation

This library is available through the npm registry.

NPM

$ npm -i solid-aspect-ratio

Yarn

$ yarn add solid-aspect-ratio

Setup

Start using it by importing the library first.

CommonJS

const AspectRatio = require('solid-aspect-ratio');

ES6

import AspectRatio from 'solid-aspect-ratio';

Usage

import AspectRatio from 'solid-aspect-ratio';

export default function Sample() {
  return (
    <AspectRatio ratio="3/4" />
    <AspectRatio ratio="3:4" /> // Same as "3/4"
    <AspectRatio ratio={3/4} /> // Same as "3/4"
    <AspectRatio ratio={0.75} /> // Same as "3/4"
  );
}