Image

Source

• Image.css

Example

<div class="x-image rounded before:skeleton">
    <img class="aspect-square" src="https://picsum.photos/seed/picsum/200/200" loading="lazy" alt="">
</div>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/image/avatar.css" layer(utilities);
@import "winduum/src/components/image/default.css" layer(utilities);

/* Example customization */
@layer utilities {
  .x-image.is-compact {
    padding: 0.5rem;
  }
}

Winduum CSS Code

winduum/src/components/image/avatar.css

.x-image:where(.avatar) {
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
  container-type: inline-size;
  justify-content: center;
  align-items: center;

  :where(span) {
    font-weight: var(--font-weight-medium);
    font-size: 50cqi;
  }
}

winduum/src/components/image/default.css

.x-image {
  position: relative;
  display: inline-flex;
  border-radius: inherit;
  flex-shrink: 0;

  &::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
  }

  > :where(img, video, iframe, object, svg) {
    border-radius: inherit;
    min-inline-size: 100%;
    height: auto;
    object-fit: contain;
  }
}