CSS比例尺和可滚动容器中的中心图像而无需裁剪

Question

我想缩放图像，以便用户可以在变焦后滚动。 以下示例效果很好，但我必须将原点设置为左上角，否则图像被裁剪到顶部和左上。无论如何，是否可以扩展到图像的中心（就像我省略转换原素时发生的那样），但没有裁剪？

请注意，我使用比例尺，因为图像将具有关联的图像映射，因此我不能仅设置宽度和高度。

#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>

Answer 1

此代码在这里，修复程序是右上角，位置：绝对;

#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>