ResponsiveWrapper

A wrapper component that maintains its aspect ratio when resized.

Usage

import { ResponsiveWrapper } from '@wordpress/components';

const MyResponsiveWrapper = () => (
    <ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
        <img
            src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
            alt="WordPress"
        />
    </ResponsiveWrapper>
);

Usage with SVG elements

When passing an SVG element as the <ResponsiveWrapper />‘s child, make sure that it has the viewbox and the preserveAspectRatio set.

When dealing with SVGs, it may not be possible to derive its naturalWidth and naturalHeight and therefore passing them as propertied to <ResponsiveWrapper />. In this case, the SVG simply keeps scaling up to fill its container, unless the height and width attributes are specified.

Props

children: React.ReactElement

The element to wrap.

  • Required: Yes

isInline: boolean

If true, the wrapper will be span instead of div.

  • Required: No
  • Default: false

naturalHeight: number

The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.

  • Required: No

naturalWidth: number

The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.

  • Required: No