@ussebastian/kitdigital/docs/components/utility/aspect-ratio-with-images.html

Kit Digital de la Universidad San Sebastián

<section class="flex flex-wrap gap-24">
  <div>
    <img
      src="https://dummyimage.com/480x720/"
      alt="dummyimage"
      class="img-cover example-height aspect-ratio-1-1"
    />
  </div>
  <div>
    <img
      src="https://dummyimage.com/480x720/"
      alt="dummyimage"
      class="img-cover example-height aspect-ratio-1-1 aspect-ratio-sm-4-3"
    />
  </div>
  <div>
    <img
      src="https://dummyimage.com/480x720/"
      alt="dummyimage"
      class="img-cover example-height aspect-ratio-1-1 aspect-ratio-sm-3-2"
    />
  </div>
  <div>
    <img
      src="https://dummyimage.com/480x720/"
      alt="dummyimage"
      class="img-cover example-height aspect-ratio-1-1 aspect-ratio-sm-16-9"
    />
  </div>
  <div>
    <img
      src="https://dummyimage.com/480x720/"
      alt="dummyimage"
      class="img-cover example-height aspect-ratio-1-1 aspect-ratio-sm-2-1"
    />
  </div>
  <div>
    <img
      src="https://dummyimage.com/480x720/"
      alt="dummyimage"
      class="img-cover example-height aspect-ratio-1-1 aspect-ratio-sm-21-9"
    />
  </div>
</section>
<!-- estilos del ejemplo -->
<style>
  .example-height {
    width: 200px;
  }
</style>