Creates a component with a proportional relationship between its width and height.
ratio = width / height
https://solid-aspect-ratio.netlify.app/
Source available in example
This library is available through the npm registry.
NPM
$ npm -i solid-aspect-ratioYarn
$ yarn add solid-aspect-ratioStart using it by importing the library first.
const AspectRatio = require('solid-aspect-ratio');or
import AspectRatio from 'solid-aspect-ratio';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.
- Prince Neil Cedrick Castro - Initial work
See also the list of contributors who participated in this project.