# Image

## Rounded

<sonic-code>
  <template>
    <div class="grid gap-8 grid-cols-3 items-center">
      <sonic-image
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
        ratio="1/1"
      >
      </sonic-image>
      <sonic-image
        rounded="sm"
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        rounded
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        rounded="md"
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        rounded="lg"
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        rounded="full"
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
    </div>
  </template>
</sonic-code>

## Ratio

<sonic-code>
  <template>
    <div class="grid gap-8 grid-cols-2 items-center">
      <sonic-image
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        ratio="16/9"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        ratio="2/3"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
    </div>
  </template>
</sonic-code>

## Object position

<sonic-code>
  <template>
    <div class="grid gap-8 grid-cols-2 items-center">
      <sonic-image
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
        ratio="11/4"
      >
      </sonic-image>
      <sonic-image
        objectPosition="center top"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
        ratio="11/4"
      >
      </sonic-image>
    </div>
  </template>
</sonic-code>

## Cover

<sonic-code>
  <template>
    <div class="h-96 relative">
      <sonic-image
        cover
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
    </div>
  </template>
</sonic-code>