Fit to container on init

[fabioimpe]

Is it possible to automatically fit the image to the container when the image original size is bigger than the container itself?
In my scenario both the image and the container have unknown sizes before the actual render

[geordiegibson]

Having the same problem

[geordiegibson]

I have a similar scenario to you where container size and image size is unknown.

If you check src/stories/examples/image-responsive, you'll see that their example manually calculates the scale needed to perfectly fit a given image within the container.

I've resolved my issue by implementing a similar approach. I dynamically fetch the dimensions of both the container and the image before performing additional calculations to determine initialPositionX and initialPositionY. This ensures that the image is properly centered within the container.

Interestingly though, there is already a function "zoomToElement" that does exactly what I've just explained. However, I could only get this to work after initial render through control buttons which was frustrating. I attempted to use it through the "onInit" prop, but no luck. I also found that "centerOnInit" doesn't work properly if "limitToBounds" is false.

Whether this is a bug, not supported, or not documented well enough I think this would be a very handy thing to add. Given that they have done this manual scale calculation in their own storybook example, I would assume this functionality doesn't exist yet :)

[TutajITeraz]

I have the same problem. I think it should be default behaviour!
In the meantime I can share my workaround with you. img onload can call zoomToElement successfully.

  const transformWrapperRef = useRef(null);
  const imageRef = useRef(null);


useEffect(() => {
    const fitImage = () => {
      if (transformWrapperRef.current && imageRef.current && mainImage) {
        const { zoomToElement } = transformWrapperRef.current;
        // Use the image's DOM element ID or ref directly
        zoomToElement(imageRef.current, undefined, 0); // Undefined scale for auto-fit, 0ms animation
      }
    };

    if (imageRef.current && mainImage) {
      if (imageRef.current.complete) {
        fitImage();
      } else {
        imageRef.current.onload = fitImage;
      }
    }

    // Cleanup
    return () => {
      if (imageRef.current) {
        imageRef.current.onload = null;
      }
    };
  }, [mainImage]);

<TransformWrapper
              ref={transformWrapperRef}
              initialScale={1} 
              initialPositionX={0} 
              initialPositionY={0} 
              minScale={0.1}>
              <Controls />
              <TransformComponent
                wrapperStyle={{ height: '100%', width: '100%' }}
                contentStyle={{ objectFit: 'contain' }}>
                <img
                  ref={imageRef}
                  src={mainImage}
                  alt="Main Image"
                  style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }} />
              </TransformComponent>
</TransformWrapper>