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]} />

RatioContainer props

Name

Type

Default

ratio

numberarrayOf

1 / 2

bg

string

"primary"

color

string

"white"

Sections