Image Element
The Image element handles visual assets with support for responsive sizing, aspect ratios, and advanced features like lightboxes and object fitting.
Live Preview
Preview how images handle different aspect ratios and fits below.
Image Preview
Specifications
The Image element offers multiple ways to frame and display your visual content:
- Sizing: Set a percentage-based Size (0-100) to control the width relative to the container.
- Aspect Ratio: Force specific proportions like 1:1, 16:9, or 4:3 to maintain consistency.
- Object Fit: Control how the image fills its frame using Cover, Contain, or Fill.
- Lightbox: Enable a full-screen view when the image is clicked for enhanced interaction.
- Lazy Loading: Built-in lazy loading support for optimized page performance.
- Styling: Apply custom border-radius, box-shadows, and filters through the styling prop.
Interactions
Images in SoloPage are more than static assets. They can be linked to Interactions (clicks, hovers) that trigger actions like opening a dialog, scrolling to a section, or navigating to a different page.
AI Guidance
How to prompt for Images:
- Add a square image of a workspace with a rounded-lg border.
- Insert a full-width banner image (16:9) with an object-cover fit.
- Create a clickable profile photo that opens in a lightbox.