Photonix

Image

Enhanced image component with fixed aspect ratios and consistent styling.

Preview

Sample
Usage
import { Image } from '@photonix/ultimate';

<Image 
  src="https://images.unsplash.com/photo-1768808520785-a4ce8c12c335?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
  alt="Description" 
  aspectRatio="16:9"
  style={{ borderRadius: '8px' }} 
/>

Component API

Image

Prop
Type
Default
Description
src
string
-
Image source URL
alt
string
-
Alternative text for accessibility
aspectRatio
AspectRatio
'1:1'
Fixed aspect ratio for the image
objectFit
"cover" | "contain"
'cover'
How the image should be resized to fit its container
className
string
-
Additional CSS class
style
React.CSSProperties
-
Additional inline styles

Variants

Aspect Ratios

The component supports a comprehensive set of aspect ratios for landscape, portrait, and panoramic images.

Landscape & Panoramic

16:9 (Widescreen)

16:9

21:9 (Ultrawide)

21:9

3:1 (Panoramic)

3:1

4:3 (Classic)

4:3

3:2 (Film)

3:2

Portrait & Vertical

3:4 (Portrait)

3:4

2:3 (Classic)

2:3

9:16 (Stories)

9:16

9:21 (Tall)

9:21

Standard

1:1 (Square)

1:1
Aspect Ratios
// Square
<Image aspectRatio="1:1" ... />

// Landscape & Panoramic
<Image aspectRatio="16:9" ... />
<Image aspectRatio="21:9" ... />
<Image aspectRatio="4:3" ... />

// Portrait & Vertical
<Image aspectRatio="3:4" ... />
<Image aspectRatio="9:16" ... />

Object Fit

Control how the image is resized to fit its container using the objectFit prop.

Cover (Default)

Cover

Contain

Contain
Object Fit
<Image src="..." objectFit="cover" />
<Image src="..." objectFit="contain" />

On this page

Preview
Component API
Variants
Aspect Ratios
Object Fit
Photonix UI - React Components, Templates & Figma Design System