Auto fit large images on init

[xairoo]

How to fit large images to the outer size on init automatically? An example would be really great!

[dtemir]

Hi! Did you ever find the solution?

[zimonitrome]

This helped me!

https://github.com/prc5/react-zoom-pan-pinch/issues/210#issuecomment-869022544

you can just add styles to the image itself to be 100% width of the component, this way it will be responsive

Minimal example:

import myimg from "./myimg.png";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

export const Example = () => {
    return (
        <div style={{ width: "600px", height: "400px" }}>
            <TransformWrapper>
                <TransformComponent>
                    <img src={myimg} alt="" style={{width: "100%"}} />
                </TransformComponent>
            </TransformWrapper>
        </div>
    );
};