ResponsiveWrapper

使用法

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>
);

SVG要素との使用法

SVG要素を<ResponsiveWrapper />の子として渡す場合は、viewboxとpreserveAspectRatioが設定されていることを確認してください。

SVGを扱う際、naturalWidthとnaturalHeightを導出することができない場合があります。そのため、<ResponsiveWrapper />にプロパティとして渡す必要があります。この場合、heightとwidth属性が指定されない限り、SVGは単にそのコンテナを埋めるまで拡大し続けます。

プロパティ

children: React.ReactElement

ラップする要素。

• 必須: はい
  

isInline: boolean

trueの場合、ラッパーはspanではなくdivになります。

• 必須: いいえ
• デフォルト: false
  

naturalHeight: number

ラップする要素の固有の高さ。アスペクト比を決定するために使用されます。

• 必須: いいえ
  

naturalWidth: number

ラップする要素の固有の幅。アスペクト比を決定するために使用されます。

• 必須: いいえ