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

Kit Digital de la Universidad San Sebastián

<section class="flex gap-24 flex-wrap">
  <div>
    <span class="example-block example-height aspect-ratio-1-1">1:1</span>
  </div>
  <div>
    <span class="example-block example-height aspect-ratio-4-3">4:3</span>
  </div>
  <div>
    <span class="example-block example-height aspect-ratio-3-2">3:2</span>
  </div>
  <div>
    <span class="example-block example-height aspect-ratio-16-9">16:9</span>
  </div>
  <div>
    <span class="example-block example-height aspect-ratio-2-1">2:1</span>
  </div>
  <div>
    <span class="example-block example-height aspect-ratio-21-9">21:9</span>
  </div>
</section>
<!-- estilos del ejemplo -->
<style>
  .example-height {
    width: 180px;
  }

  .example-block {
    background-color: var(--surface-default);
    color: var(--text-default);
    display: grid;
    place-items: center;
    font-size: 60px;
    letter-spacing: 5px;
  }
</style>