Image

import { Image } from 'theme-ui'

<Image src="/photo.jpg" alt="Description" />

{
  maxWidth: '100%',
  height: 'auto',
}

<Image src="/photo.jpg" alt="Photo description" />

<Image
  src="/avatar.jpg"
  alt="User avatar"
  sx={{
    borderRadius: '50%',
    width: 64,
    height: 64,
  }}
/>

<Image
  src="/card-image.jpg"
  alt="Card"
  sx={{
    borderRadius: 4,
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
  }}
/>

<Image
  src="/hero.jpg"
  alt="Hero image"
  sx={{
    width: ['100%', '80%', '60%'],
    mx: 'auto',
  }}
/>

<Image
  src="/profile.jpg"
  alt="Profile"
  sx={{
    border: '3px solid',
    borderColor: 'primary',
  }}
/>

<Image
  src="/thumbnail.jpg"
  alt="Thumbnail"
  width={200}
  height={200}
  sx={{ objectFit: 'cover' }}
/>

<Image
  src="/large-image.jpg"
  alt="Large image"
  loading="lazy"
/>

<Box sx={{ position: 'relative' }}>
  <Image src="/bg.jpg" alt="Background" />
  <Box
    sx={{
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      bg: 'rgba(0, 0, 0, 0.4)',
    }}
  />
</Box>