Imagen

Configura tamaños y aspect-ratio de tus imágenes

Uso básico

PUI

<link rel="preload" as="image" href="/pucoui/img/pucoui-img-1.png" />
<link rel="preload" as="image" href="/pucoui/img/pucoui-img-2.png" />
<link rel="preload" as="image" href="/pucoui/img/pucoui-img-3.png" />
<div class="is-flex is-gap-4">
  <figure class="image is-size-128">
    <img src="/pucoui/img/pucoui-img-1.png" alt="" />
  </figure>

  <figure class="image is-size-128 is-rounded">
    <img src="/pucoui/img/pucoui-img-2.png" alt="" />
  </figure>

  <figure class="image is-size-128 is-rounded-4">
    <img src="/pucoui/img/pucoui-img-3.png" alt="" />
  </figure>

  <figure class="image is-size-128 is-rounded-4">
    <div class="fallback">PUI</div>
  </figure>
</div>

Tamaños

Tamaños disponibles

Clase	Tamaño	Preview
is-size-16	16px x 16px
is-size-24	24px x 24px
is-size-32	32px x 32px
is-size-48	48px x 48px
is-size-64	64px x 64px
is-size-96	96px x 96px
is-size-128	128px x 128px

Redondeado

Para redondear las imágenes puedes usar el helper de dimensiones para ello usa las clases is-rounded-*

Donde * puede ser del 0 al 6

En caso se requiera que este completamente redondeado puedes usar la clase is-rounded

Preview

Code

<link rel="preload" as="image" href="/pucoui/img/pucoui-img-1.png" />
<link rel="preload" as="image" href="/pucoui/img/pucoui-img-2.png" />
<link rel="preload" as="image" href="/pucoui/img/pucoui-img-3.png" />
<div class="is-flex is-gap-4">
  <figure class="image is-size-128 is-rounded">
    <img src="/pucoui/img/pucoui-img-1.png" alt="" />
  </figure>

  <figure class="image is-size-128 is-rounded-2">
    <img src="/pucoui/img/pucoui-img-2.png" alt="" />
  </figure>

  <figure class="image is-size-128 is-rounded-4">
    <img src="/pucoui/img/pucoui-img-3.png" alt="" />
  </figure>

  <figure class="image is-size-128 is-rounded-6">
    <img src="/pucoui/img/pucoui-img-1.png" alt="" />
  </figure>
</div>

Fallback

Muestra un texto debajo de tu imágen mientras se descarga, por ejemplo lo puedes usar para colocar las iniciales del usuario

Preview

PUI

PUI

Code

<link rel="preload" as="image" href="not-found-img.png" />
<div class="is-flex is-gap-4">
  <figure class="image is-size-64 is-rounded">
    <div class="fallback">PUI</div>
    <img src="not-found-img.png" alt="" />
  </figure>
  <figure class="image is-size-64 is-rounded-3">
    <div class="fallback">PUI</div>
    <img src="not-found-img.png" alt="" />
  </figure>
</div>

Relación de aspecto

Usa estas clases para configurar la relación de aspecto de una imágen, estas clases son responsivas es decir siempre van a mantener la relación de aspecto aunque la pantalla sea pequeña o grande

Clase	Tamaño	Preview
is-1by1	1 / 1
is-5by4	5 / 4
is-4by3	4 / 3
is-3by2	3 / 2
is-5by3	5 / 3
is-16by9	16 / 9
is-2by1	2 / 1
is-3by1	3 / 1
is-4by5	4 / 5
is-3by4	3 / 4
is-2by3	2 / 3
is-3by5	3 / 5
is-9by16	9 / 16
is-1by2	1 / 2
is-1by3	1 / 3