React aspect ratio component
Small component that allows you to create responsive elements that will keep their ratio on different screen sizes.
It uses standard CSS hack to achieve it.
Please note that Ratio
ads wrapper element which makes things easier in certain scenarios.
Usage
;; { return <Ratio ratio= 16 / 9 > YOUR CONTENT GOES HERE </Ratio> ; }
Props
-
ratio, default
1
Aspect ratio value. E.g. for
16:9
ratio, pass16 / 9
.Zero will default it back to one.
-
className, default
''
Wrapper element class name
-
ratioClassName, default
''
Helper div class name.
-
contentClassName, default
''
Content div class name
-
style, default
{}
Object with CSS styles for the wrapper element. By default it adds
display: block
but it can be overridden. -
tagName, default
'div'
HTML element to be used for the wrapper element. E.g. you can pass
a
oraside
.
All other props will be pass to the wrapper element. This is useful for passing accessibility props like aria-label
or tabIndex
.