'CSS scale and centre image within scrollable container without cropping

I'd like to zoom an image so that the user can scroll around it after the zoom. The following example works well but I have to set the origin to top left as otherwise the image is cropped to the top and left. Is there anyway to scale to the centre of the image (as happens when I omit the transform-origin) but without cropping?

Please note I'm using scale because the image will have an associated image map so I can't just set the width and height.

#container {
    width: 500px;
    height: 500px;
    overflow: auto;
}

#pic {
    transform: scale(2);
    transform-origin: top left;
}
<div id="container">
  <img id="pic" src="https://picsum.photos/id/237/500/500" >
</div>
htmlcsscss-transforms


Solution 1:[1]

This code right here, fixes is to top right, with position:absolute;

#container {
    display:block;
    margin:auto;
    width: 500px;
    height: 500px;
    overflow: auto;
}

#pic {
    transform: scale(2);
    transform-origin: top left;
}
<div id="container">
  <img id="pic" src="https://picsum.photos/id/237/500/500" >
</div>
<div id="container">
  <img id="pic" src="https://picsum.photos/id/237/500/500" >
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions