Img

Responsive image container with shapes, loading skeleton, error states, and aspect ratios.

Basic Image

<div class="img img-rounded" style="width: 300px;">
  <img class="img-element" src="https://picsum.photos/seed/img1/600/400" alt="Sample image" onload="this.parentElement.classList.add('img-loaded')">
  <div class="img-skeleton"></div>
</div>

Requires: ux.min.css

<div class="relative block overflow-hidden rounded-2xl bg-base-200" style="width: 300px;">
  <img class="block w-full h-full object-cover" src="https://picsum.photos/seed/img1/600/400" alt="Sample image">
</div>

Requires: tw.min.css

// Optional: add 'img-loaded' class on load for fade-in
const img = document.querySelector('.img-element');
img.addEventListener('load', () => &#123;
  img.closest('.img').classList.add('img-loaded');
&#125;);

Shapes

<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start;">
  <div class="img img-rounded img-md img-loaded">
    <img class="img-element" src="https://picsum.photos/seed/shape1/200/200" alt="Rounded">
  </div>
  <div class="img img-circle img-md img-loaded">
    <img class="img-element" src="https://picsum.photos/seed/shape2/200/200" alt="Circle">
  </div>
  <div class="img img-md img-loaded">
    <img class="img-element" src="https://picsum.photos/seed/shape3/200/200" alt="Default">
  </div>
</div>

Requires: ux.min.css

<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start;">
  <div class="relative block w-20 h-20 rounded-2xl overflow-hidden bg-base-200">
    <img class="block w-full h-full object-cover" src="https://picsum.photos/seed/shape1/200/200" alt="Rounded">
  </div>
  <div class="relative block w-20 h-20 rounded-full overflow-hidden bg-base-200">
    <img class="block w-full h-full object-cover" src="https://picsum.photos/seed/shape2/200/200" alt="Circle">
  </div>
  <div class="relative block w-20 h-20 overflow-hidden bg-base-200">
    <img class="block w-full h-full object-cover" src="https://picsum.photos/seed/shape3/200/200" alt="Default">
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Aspect Ratios

<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start;">
  <div class="img img-square img-rounded img-loaded" style="width: 150px;">
    <img class="img-element" src="https://picsum.photos/seed/ar1/300/300" alt="Square">
  </div>
  <div class="img img-video img-rounded img-loaded" style="width: 200px;">
    <img class="img-element" src="https://picsum.photos/seed/ar2/400/225" alt="16:9">
  </div>
  <div class="img img-portrait img-rounded img-loaded" style="width: 120px;">
    <img class="img-element" src="https://picsum.photos/seed/ar3/300/400" alt="3:4">
  </div>
</div>

Requires: ux.min.css

<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start;">
  <div class="relative block aspect-square rounded-2xl overflow-hidden bg-base-200" style="width: 150px;">
    <img class="block w-full h-full object-cover" src="https://picsum.photos/seed/ar1/300/300" alt="Square">
  </div>
  <div class="relative block aspect-video rounded-2xl overflow-hidden bg-base-200" style="width: 200px;">
    <img class="block w-full h-full object-cover" src="https://picsum.photos/seed/ar2/400/225" alt="16:9">
  </div>
  <div class="relative block rounded-2xl overflow-hidden bg-base-200" style="width: 120px; aspect-ratio: 3/4;">
    <img class="block w-full h-full object-cover" src="https://picsum.photos/seed/ar3/300/400" alt="3:4">
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Sizes

<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
  <div class="img img-xs img-circle img-loaded">
    <img class="img-element" src="https://picsum.photos/seed/sz1/64/64" alt="XS">
  </div>
  <div class="img img-sm img-circle img-loaded">
    <img class="img-element" src="https://picsum.photos/seed/sz2/96/96" alt="SM">
  </div>
  <div class="img img-md img-circle img-loaded">
    <img class="img-element" src="https://picsum.photos/seed/sz3/160/160" alt="MD">
  </div>
  <div class="img img-lg img-circle img-loaded">
    <img class="img-element" src="https://picsum.photos/seed/sz4/240/240" alt="LG">
  </div>
</div>

Requires: ux.min.css

<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
  <div class="relative block w-8 h-8 rounded-full overflow-hidden bg-base-200">
    <img class="block w-full h-full object-cover" src="https://picsum.photos/seed/sz1/64/64" alt="XS">
  </div>
  <div class="relative block w-12 h-12 rounded-full overflow-hidden bg-base-200">
    <img class="block w-full h-full object-cover" src="https://picsum.photos/seed/sz2/96/96" alt="SM">
  </div>
  <div class="relative block w-20 h-20 rounded-full overflow-hidden bg-base-200">
    <img class="block w-full h-full object-cover" src="https://picsum.photos/seed/sz3/160/160" alt="MD">
  </div>
  <div class="relative block w-30 h-30 rounded-full overflow-hidden bg-base-200">
    <img class="block w-full h-full object-cover" src="https://picsum.photos/seed/sz4/240/240" alt="LG">
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Skeleton Loading

<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
  <div class="img img-rounded img-video" style="width: 280px;">
    <div class="img-skeleton"></div>
  </div>
  <div class="img img-circle img-md">
    <div class="img-skeleton"></div>
  </div>
</div>

Requires: ux.min.css

<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
  <div class="relative block aspect-video rounded-2xl overflow-hidden bg-base-200" style="width: 280px;">
    <div class="absolute inset-0 bg-base-200 animate-pulse"></div>
  </div>
  <div class="relative block w-20 h-20 rounded-full overflow-hidden bg-base-200">
    <div class="absolute inset-0 bg-base-200 animate-pulse"></div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - skeleton shows by default
// Add 'img-loaded' class to hide skeleton when image loads

Error State

Failed to load image

<div class="img img-rounded img-error" style="width: 280px; aspect-ratio: 16/9;">
  <div class="img-error-display">
    <svg class="img-error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10"></path><path d="m3 15 4-4a3 5 0 0 1 3 0l5 5"></path><path d="m14 14 1-1a3 5 0 0 1 3 0l3 3"></path></svg>
    <span class="img-error-text">Failed to load image</span>
  </div>
</div>

Requires: ux.min.css

<div class="relative block rounded-2xl overflow-hidden bg-base-200" style="width: 280px; aspect-ratio: 16/9;">
  <div class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-base-200 text-base-content/40">
    <svg class="w-8 h-8 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10"></path><path d="m3 15 4-4a3 5 0 0 1 3 0l5 5"></path><path d="m14 14 1-1a3 5 0 0 1 3 0l3 3"></path></svg>
    <span class="text-xs text-center">Failed to load image</span>
  </div>
</div>

Requires: tw.min.css

// On error, add 'img-error' class to show fallback
const img = document.querySelector('.img-element');
img.addEventListener('error', () => &#123;
  img.closest('.img').classList.add('img-error');
&#125;);

Reference

Class	Description
.img	Base image container
.img-element	The <img> element inside container
.img-rounded	Rounded corners (radius-box)
.img-circle	Circular shape
.img-contain	Object-fit: contain
.img-cover	Object-fit: cover (default)
.img-fill	Object-fit: fill
.img-square	1:1 aspect ratio
.img-video	16:9 aspect ratio
.img-portrait	3:4 aspect ratio
.img-landscape	4:3 aspect ratio
.img-wide	21:9 aspect ratio
.img-xs / sm / md / lg / xl	Fixed size variants (32-200px)
.img-loaded	Shows image, hides skeleton
.img-error	Shows error state
.img-skeleton	Shimmer loading placeholder
.img-placeholder	Icon placeholder
.img-error-display	Error state overlay
.img-lqip	Low-quality image placeholder (blur-up)
.img-fade	Fade-in animation on load
.img-zoom	Zoom-in animation on load
.img.glass	Glassmorphism variant