Image

Constrain an image to a given aspect ratio.

Polymorphic Component

By default, content is rendered inside an <img>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Square Image

If no aspectRatio prop is passed, the Image will render as a square.

import { Image } from '@curology/ui-components-web/react/Image';

<Image src={someImage} />
<Image src={someImage} aspectRatio="square" />
<Image src={someImage} aspectRatio="1:1" />

Landscape Ratios

There are three different landscape aspect ratios available.

import { Image } from '@curology/ui-components-web/react/Image';

<Image 
  ...
  aspectRatio="{3:2|4:3|5:4}"
/>

Portrait Ratios

There are three different portait aspect ratios available.

import { Image } from '@curology/ui-components-web/react/Image';

<Image 
  ...
  aspectRatio="{2:3|3:4|4:5}"
/>

Props

ImageProps

Name	Type	Default Value	Required	Description
All attributes of a <img />
aspectRatio	"auto" | "square" | "1:1" | "2:3" | "3:2" | "3:4" | "4:3" | "4:5" | "5:4"	'square'	No	Constrain the image to a specific aspect ratio.