Zoomable Frame
Zoomable content container with hover zoom.
<rhx-zoomable-frame>
Examples
Image
<div style="max-width: 600px; height: 400px; overflow: hidden;">
<rhx-zoomable-frame
rhx-src="https://picsum.photos/id/1015/1200/800"
rhx-alt="Mountain landscape"
rhx-min-scale="0.5"
rhx-max-scale="4" />
</div>Pre-zoomed
<div style="max-width: 600px; height: 400px; overflow: hidden;">
<rhx-zoomable-frame
rhx-src="https://picsum.photos/id/1015/1200/800"
rhx-alt="Mountain landscape zoomed"
rhx-scale="2" />
</div>Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-src |
string |
- |
URL of the image to display |
rhx-alt |
string |
- |
Alt text for the image |
rhx-scale |
double |
1 |
Initial zoom level |
rhx-min-scale |
double |
1 |
Minimum zoom level |
rhx-max-scale |
double |
3 |
Maximum zoom level |
Accessibility
- Keyboard shortcuts support zoom in (
+), zoom out (-), and reset (0). - The container uses
aria-labelto describe the current zoom level for screen readers. - Double-click resets zoom to the default level for easy recovery.