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

ratio = width / height

Internally, TailwindCSS to achieve the intended aspect ratio.

Table of Contents

• Demo
• Installation
• Setup
• Usage
• Authors
• Changelog
• License

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');

or

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"
  );
}

Authors

• Prince Neil Cedrick Castro - Initial work

See also the list of contributors who participated in this project.

Changelog

Changelog

License

MIT