Not working at all?

[ignacio-dev]

The following code won't work:

import { AspectRatio } from 'react-aspect-ratio';

<AspectRatio
    ratio="4/5"
    style={{
        maxWidth: '600px',
        backgroundImage: 'url(https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg)',
        backgroundSize: 'cover'
    }}
>...</AspectRatio>

This is the resulting output:

<div
    class="react-aspect-ratio-placeholder"
    style="max-width: 600px; background-image: url("https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg";);background-size: cover; --aspect-ratio:(0.8);"
>
   ...
</div>

But it just gets render like a regular div...

None of the examples provided work either! The package is properly installed. What am I missing?

[roderickhsiao]

did you install the CSS file? https://github.com/roderickhsiao/react-aspect-ratio#css-inspired-by-thierry

https://github.com/roderickhsiao/react-aspect-ratio/blob/main/aspect-ratio.css

[roderickhsiao]

for background image, AspectRatio should be your container of the background image div

https://roderickhsiao.github.io/react-aspect-ratio/?path=/story/aspect-ratio--background-image

import { AspectRatio } from 'react-aspect-ratio';

<AspectRatio
    ratio="4/5"
    style={{
        maxWidth: '600px',
    }}
>
  <div 
    style={{ 
      backgroundImage: 'url(https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg)',
      backgroundSize: 'cover'
    }}
  />
</AspectRatio>

[ignacio-dev]

Importing the CSS file solved the issue:

import 'react-aspect-ratio/aspect-ratio.css';

Thank you!

[roderickhsiao]

Awesome!