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

Kit Digital de la Universidad San Sebastián

<section class="flex gap-24 flex-wrap">
  <div>
    <span class="example-block example-width aspect-ratio-1-1">1:1</span>
  </div>
  <div>
    <span class="example-block example-width aspect-ratio-3-4">3:4</span>
  </div>
  <div>
    <span class="example-block example-width aspect-ratio-2-3">2:3</span>
  </div>
  <div>
    <span class="example-block example-width aspect-ratio-9-16">9:16</span>
  </div>
  <div>
    <span class="example-block example-width aspect-ratio-1-2">1:2</span>
  </div>
  <div>
    <span class="example-block example-width aspect-ratio-9-21">9:21</span>
  </div>
</section>
<!-- estilos del ejemplo -->
<style>
  .example-width {
    width: 160px;
  }
  .example-block {
    background-color: var(--surface-default);
    color: var(--text-default);
    display: grid;
    place-items: center;
    font-size: 60px;
  }
</style>