Skip to content

Latest commit

 

History

History
51 lines (31 loc) · 1.32 KB

README.md

File metadata and controls

51 lines (31 loc) · 1.32 KB
Raw

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