JavaScript import
import Ratio from 'progressive-web-sdk/dist/components/ratio'
SCSS import
@import 'node_modules/progressive-web-sdk/dist/components/ratio/base';
Props table
Name & Description | Type | Default |
---|
aspectThe aspect ratio, which designates the Ratio component's width and
height. Written in the format of x:y , for example 4:3 . | custom | none |
children The content that will be rendered inside pw-ratio__inner . | node | none |
className Adds values to the class attribute of the root element. | string | none |
height Designates the Ratio component's height. | custom | 1 |
width Designates the Ratio component's width. | custom | 1 |
style | | {} |
Basic example
<Ratio width="4" height="3">
<img src="https://unsplash.it/400/300" alt="" />
</Ratio>
With aspect
Instead of using the height
and width
props, aspect
can be used.
The value passed to aspect
should be a string of two positive integers with a
colon ”:” in between. For example aspect="4:3"
.
<Ratio aspect="4:3">
<img src="https://unsplash.it/400/300" alt="" />
</Ratio>