Image

Set sizes and aspect-ratios for your images.

Basic Usage

PUI

<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>

Sizes

Available sizes:

Class	Size	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

Rounded

To round images, you can use the dimension helpers with the is-rounded-* classes.

Where * can be from 0 to 6.

If you need the image to be completely rounded, you can use the is-rounded class.

Preview

Code

<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

Displays text below your image while it loads. For example, you can use it to place the user's initials.

Preview

PUI

PUI

Code

<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>

Aspect Ratio

Use these classes to set the aspect ratio of an image. These classes are responsive, meaning they will always maintain the aspect ratio even if the screen is small or large.

Class	Size	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