react-aspect-ratio

React Aspect Ratio Component

This is a React implementation for aspect ratio placeholder preventing browser reflow before browser downloads and renders your component.

Inspired by awesome post from CSS Mojo by Thierry

Original idea from Sérgio Gomes

Usage

You will need to import 'react-aspect-ratio/aspect-ratio.css'

import AspectRatio from 'react-aspect-ratio';

const RatioImage = () => (
  <AspectRatio ratio="3/4" style={{maxWidth: '400px'}}>
    <img src="https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg" />
  </AspectRatio>
);

For browser support CSS variable, you can use it to wrap other elements (like iframe, video, object ...etc) as well

import AspectRatio from 'react-aspect-ratio';

const RatioIframe = () => (
  <AspectRatio ratio="560/315" style={{maxWidth: '560px'}}>
    <iframe src="https://www.youtube.com/embed/Bku71V5f66g" frameBorder="0" allowFullScreen />
  </AspectRatio>
);

Can also use for background image

import AspectRatio from 'react-aspect-ratio';

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