此组件已弃用。请改用 CSS aspect-ratio 属性。

一个在调整大小时保持其纵横比的包装器组件。

用法

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 将简单地持续缩放以填充其容器。

Props

children: React.ReactElement

要包裹的元素。

  • 必填：是

isInline: boolean

如果为 true，则包装器将是 span 而不是 div。

  • 必填：否
  • 默认值：false

naturalHeight: number

要包裹元素的固有高度。将用于确定纵横比。

  • 必填：否

naturalWidth: number

要包裹元素的固有宽度。将用于确定纵横比。

  • 必填：否