solid-aspect-ratio

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

ratio = width / height

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

Possible values for the ratio prop.

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

Using it with an image.

<AspectRatio ratio={16 / 9}>
  <img
    src="https://picsum.photos/500"
    alt="Picsum"
    style={{ width: '100%', height: '100%', 'object-fit': 'cover' }}
  />
</AspectRatio>

You can check the example folder for more usage examples.

Authors

• Prince Neil Cedrick Castro - Initial work

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

Changelog

Changelog

License

MIT