Zoom Not Working properly

[Batman4234]

why do this happen. the container does have max-width set to 1200px. ts <ReactImageMagnify {...{ smallImage: { alt: 'Wristwatch by Ted Baker London', isFluidWidth: true, src: uri, }, largeImage: { src: uri, width: 1200, height: 1200 } }} />
it is wrapped in 2 containers,
the large container <div className='h-full w-full lg:pl-5 lg:pt-3 flex pt-1 flex-col max-w-[1200px]'>
the child of large container and parent of the image.
css .img img { width: 480px; height:100%; object-fit: cover; }

[santo29sh]

"I faced the same issue on my project and realized that I had used hierarchical CSS along with 'img {max-width: 100%}' which caused the image to not cover the entire block. When I removed this, the zoom image worked perfectly."

[YDivya123]

"I faced the same issue on my project and realized that I had used hierarchical CSS along with 'img {max-width: 100%}' which caused the image to not cover the entire block. When I removed this, the zoom image worked perfectly."

hi santhosh can you provide your code.i tried enalrge zoom magnify but its not working properly.

<Swiper
spaceBetween={10}
slidesPerView={1}
onSwiper={setSwiper}
onSlideChange={(swiper) =>
setSelectedImageIndex(swiper.realIndex)
}
>

          <div className="">
            {product && product.images[selectedImageIndex] && (
              <ReactImageMagnify
                enlargedImagePosition=""
                // enlargedImageContainerStyle={{ zIndex: 9999 }}
                className="w-full h-full"
                {...{
                  smallImage: {
                    alt: "",
                    isFluidWidth: true,
                    src: product.images[selectedImageIndex].src,
                  },
                  largeImage: {
                    src: product.images[selectedImageIndex].src,
                    width: 2500,
                    height: 3000,
                  },
                  enlargedImageContainerDimensions: {
                    width: "200%", // Adjust the width to your desired size, e.g., "50%"
                    height: "100%", // Adjust the height to your desired size, e.g., "50%"
                  },
                  enlargedImageContainerStyle: {
                    overflow: "hidden",
                    backgroundPosition: "center",
                    zIndex: "9999",
                  },
                  shouldHideHintAfterFirstActivation: true,
                }}
              />
            )}
          </div>
        </div>

this is the issue am facing.can you please help me

[Rajapandichangecx]

hi @YDivya123, any solution for this? I am facing same issue

[santo29sh]

I have fixed like this, I checked the property of <img tag, and I found max-width: property was there due this, image size not covered entire block. if you have like this just removed the img - max-width: property, I think page will work properly.

[YDivya123]

thank you for your reply.but not resolved the problem.

…

________________________________ From: santo29sh ***@***.***> Sent: Friday, June 23, 2023 5:48 PM To: ethanselzer/react-image-magnify ***@***.***> Cc: Divya Yellapu ***@***.***>; Mention ***@***.***> Subject: Re: [ethanselzer/react-image-magnify] Zoom Not Working properly (Issue #147) [image]<https://user-images.githubusercontent.com/44389735/248264820-3eff9619-cee1-4640-a5e9-44e73aba280a.png> I have fixed like this, I checked the property of <img tag, and I found max-width: property was there due this, image size not covered entire block. if you have like this just removed the img - max-width: property, I think page will work properly. — Reply to this email directly, view it on GitHub<#147 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A6VWQBB6GQKV3XKGRS3A4EDXMWCS5ANCNFSM55YOE2VA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[santo29sh]

Below is the line of code that I have written for my page. While working on this package, I encountered two issues. Firstly, as mentioned in the previous discussion, there is a max-size for the image tag. Secondly, the image size is small, so I uploaded an image of the same dimensions as specified in this package. It is possible that your image size is smaller, so please verify the declared size in the package. and check.

<ReactImageMagnify
{...props}

        {...{
          smallImage: {
            alt: 'Product Image',
            isFluidWidth: true,
            src: selectedImage == null ? singleImage : selectedImage, // URL of the selected image
            sizes: '(max-width: 480px) 100vw, (max-width: 1200px) 30vw, 360px'
            
          },
          largeImage: {
            src: selectedImage == null ? singleImage : selectedImage, // URL of the large image
            srcSet: selectedImage == null ? singleImage : selectedImage,
            width: 1280, // width of the large image
            height: 960, // height of the large image
          },
          enlargedImageContainerStyle: {
            zIndex: "1500",
            backgroundColor: 'rgba(255,255,255,1)',
            display:"flex",
            border:"1px solid #ccc",
            overflow: "hidden"
          },
          enlargedImageContainerDimensions: {
            width: "200%",
            height: "100%",
          },
          lensStyle: { backgroundColor: 'rgba(192,192,192,.1)' },
          shouldUsePositiveSpaceLens: true,
          enlargedImagePosition,
        }}
      />

[santo29sh]