solid-aspect-ratio
v0.2.1
Published
Transform URLs in strings to actual aspect-ratio.
Downloads
21
Readme
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
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.