Img

The Img component wraps Astro’s <Image> with responsive srcset generation, automatic size derivation, and an optional click-to-enlarge fullscreen modal.

Import

import Img from '@mdx/Img.astro';

Props

Size Derivation

When sizes is not explicitly provided, it is automatically derived from the width prop:

This tells the browser the expected display width so it can pick the optimal image from the generated srcset without downloading unnecessarily large files.

Note: When Img is used inside a Marquee, the Marquee component automatically overrides the sizes attribute based on its height preset and each image’s aspect ratio. You do not need to pass sizes manually in that context.

Usage

import myImage from '@assets/events/event-1.jpg';

<Img src={myImage} alt="Event photo" width="60%" />

Rendering Modes

The component has three rendering paths:

1. Click-to-enlarge enabled (default) — Wraps in a <div> with x-data="{ modalOpen: false }", renders ImageModal via x-teleport="body", adds hover ring effect
2. Fill mode without modal — Wraps in a <div> with object-cover for container-filling behavior
3. Plain image — Renders just the Astro <Image> element with no wrapper

ImageModal Integration

When enableClickToEnlarge is true, a full-resolution WebP image is pre-generated at build time via getImage(). The ImageModal component uses x-teleport="body" to render a fullscreen overlay with:

• Backdrop click to close
• Escape key to close
• Close button (top-right)
• Fade transition (200ms in, 150ms out)

The modal reads modalOpen from the parent Img component’s Alpine scope.

Rounding Behavior

If no rounded-* class is detected in the class prop, the component automatically applies rounded-lg. To override, pass any Tailwind rounding class (e.g., class="rounded-xl" or class="rounded-none").

Source: src/components/mdx/Img.astro, src/components/mdx/ImageModal.astro