Fixing Zoom Styling Issues with Next/Image Component

[Anshtripathi079]

Hi,

I’m using the Next/Image component to render images and applying a zoom functionality to these images. Currently, the zoom effect is not working as expected. Instead of zooming in to a larger size, the image appears to be shrinking. I have some styling issues where the zoomed image seems to be resized incorrectly.

Here’s a visual representation of the problem:

Current Behavior:

The zoomed image is smaller than expected:

Desired Outcome:

I want to apply these fixed styles to all zoomed images, such as:

top: 50%;
width: 100%;
height: 100%; 
transform: translate(0, -50%) scale(1);

Expected Output:

Here's how the current code looks:

    let imgComponent = (
            <Image
                src={props.src}
                alt={altText ? altText : 'Image'}
                loading={props.loading}
                height={0}
                width={0}
                sizes="100%"
                className={`h-auto w-full rounded-md border border-solid border-neutral-300 object-contain ${props.className || ''}`}
            />
    );
    // Zoom effect for image if disableZoom is not set
    if (!props.disableZoom) {
        imgComponent = <Zoom>{imgComponent}</Zoom>; 
    }

[rpearce]

This is the same root issue as #363, where custom transforms and positioning (when zooming) on the image, itself, are not forwarded because transform and position are used to do the zooming.

I'll try to think of how to take this into account—even with just partial support—but no guarantees. The positioning and transforming is the core of how this works, and it's a little complicated.