Media

Responsive aspect ratios

aspect-1/1

aspect-4/3

aspect-16/9

aspect-21/9

Show codeHide code

<div class="grid-cols-2 md:grid-cols-4 gap-16">
  <figure>
    <img
      class="img aspect-1/1"
      src="/images/decorative/ex60-road.avif"
      width="400"
      alt=""
    />
    <figcaption class="micro mt-8">aspect-1/1</figcaption>
  </figure>
  <figure>
    <img
      class="img aspect-4/3"
      src="/images/decorative/ex60-road.avif"
      width="400"
      alt=""
    />
    <figcaption class="micro mt-8">aspect-4/3</figcaption>
  </figure>
  <figure>
    <img
      class="img aspect-16/9"
      src="/images/decorative/ex60-road.avif"
      width="400"
      alt=""
    />
    <figcaption class="micro mt-8">aspect-16/9</figcaption>
  </figure>
  <figure>
    <img
      class="img aspect-21/9"
      src="/images/decorative/ex60-road.avif"
      width="400"
      alt=""
    />
    <figcaption class="micro mt-8">aspect-21/9</figcaption>
  </figure>
</div>

Object fit

object-cover

object-contain

object-fill

Show codeHide code

<div class="grid-cols-3 gap-16">
  <figure>
    <div class="aspect-1/1 bg-secondary">
      <img
        class="w-full h-full object-cover"
        src="/images/decorative/ex90-clay-model.avif"
        alt=""
      />
    </div>
    <figcaption class="micro mt-8">object-cover</figcaption>
  </figure>
  <figure>
    <div class="aspect-1/1 bg-secondary">
      <img
        class="w-full h-full object-contain"
        src="/images/decorative/ex90-clay-model.avif"
        alt=""
      />
    </div>
    <figcaption class="micro mt-8">object-contain</figcaption>
  </figure>
  <figure>
    <div class="aspect-1/1 bg-secondary">
      <img
        class="w-full h-full object-fill"
        src="/images/decorative/ex90-clay-model.avif"
        alt=""
      />
    </div>
    <figcaption class="micro mt-8">object-fill</figcaption>
  </figure>
</div>