Ratios

import RatioCustom from '!!raw-loader!../examples/Ratio/Custom'; import RatioDefault from '!!raw-loader!../examples/Ratio/Default'; import RatioExample from '!!raw-loader!../examples/Ratio/Example';

About

Use the ratio helper to manage the aspect ratios of external content like <iframe>s, <embed>s, <video>s, and <object>s. These helpers also can be used on any standard HTML child element (e.g., a <div> or ``). Styles are applied from the parent .ratio class directly to the child.

You don't need to include frameborder="0" in your iframes.

Example

<CodeBlock language="jsx" live> {RatioExample} </CodeBlock>

Aspect ratios

Aspect ratios can be customized using aspectRatio. By default the following aspectRatio values are provided:

<CodeBlock language="jsx" live previewClassName="ratio-example"> {RatioDefault} </CodeBlock>

Custom

Create custom aspect ratios by passing a number to aspectRatio instead of using the above pre-defined values. You can use either a fraction or percentage to define the custom ratio.

<CodeBlock language="jsx" live previewClassName="ratio-example"> {RatioCustom} </CodeBlock>

API

Ratio

<PropsTable name="Ratio" />