title: "RatioContainer" slug: "/packages/ratio-container" category: "layout" componentNames:

• "RatioContainer"

RatioContainer

The RatioContainer component can be used to wrap content in a div with a fixed ratio. The ratio container is often used to display images in certain ratio.

import RatioContainer from "@ds-kit/ratio-container"

Basic Example

<RatioContainer />

Custom ratios

<>
  <Div width={"25%"} display={"inline-block"}>
    <RatioContainer ratio={1 / 1} bg="grey.100" />
  </Div>
  <Div width={"25%"} display={"inline-block"}>
    <RatioContainer ratio={1 / 2} bg="grey.200" />
  </Div>
  <Div width={"25%"} display={"inline-block"}>
    <RatioContainer ratio={2 / 3} bg="grey.300" />
  </Div>
  <Div width={"25%"} display={"inline-block"}>
    <RatioContainer ratio={4 / 3} bg="grey.400" />
  </Div>
</>

Responsive

<RatioContainer ratio={[1 / 1, 1 / 2, null, 3 / 4]} />