AspectRatio

theme-ui

0.6.0-alpha.7

Component for maintaining a fluid-width aspect ratio

Component

browse

docs

issues

import { AspectRatio } from 'theme-ui';

Overview

Aspect Ratio

browse

docs

issues

({ ratio }) => (
  <Box sx={{ width: 100, height: 80 }}>
    <AspectRatio ratio={ratio}>
      <Heading>Aspect Ratio</Heading>
    </AspectRatio>
  </Box>
)

Controls

Name	Description	Default	Controls
ratio	number	-

Properties

	Name	Description	Default
BoxOwnProps (4 properties)

	as	ElementType<any>	-
	variant	string	-
	css	Interpolation<any>	-
	sx	ThemeUIStyleObject	-
SpaceProps (28 properties)
HTMLAttributes (44 properties)
OpacityProps (1 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
Attributes (1 properties)
BackgroundColorProps (2 properties)
AspectRatioProps (1 properties)
RefAttributes (1 properties)