spz-zoom#

#When to Use

When you need to zoom in on images.

#Code Demonstration

#Basic Usage

The most basic usage, the root element must have a child element, and by default, the first child element is used for zooming.

<spz-zoom zoom-ratio="1.8" layout="container">
  <spz-img layout="responsive" width="320" height="400" src="/assets/images/rubus-idaeus.webp" alt="Rubus idaeus" object-fit="cover"></spz-img>
</spz-zoom>

#Click to Zoom

Zooming can begin only after the mouse clicks on the original image.

<spz-zoom interact="click" zoom-ratio="2" layout="container">
  <spz-img layout="responsive" width="320" height="400" src="/assets/images/rubus-idaeus.webp" alt="Rubus idaeus" object-fit="cover"></spz-img>
</spz-zoom>

#Properties

#Events

zoomIn

This event is automatically triggered when the image enters zoom.

zoomOut

This event is automatically triggered when the image exits zoom.

#AI Summary (LLM Ready)

• Component ID: spz-zoom
• One-line purpose: Image zoomer.
• Detected attribute rows: 0
• Detected method subsections: 0
• Detected event subsections: 2
• Top attribute names: none (needs manual completion)
• Top method names: none (needs manual completion)
• Top event names: zoomIn, zoomOut
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/