Javascript 如何使比屏幕大的可滚动图像居中

我想制作一个图像查看器，无论图像有多大，它都可以居中显示，并允许滚动查看整个图像

我遇到的问题是，虽然将比容器小的图像居中很容易，但当它们较大时，我会将图像放置在屏幕的右侧和顶部

下面是一个fiddle，它使用了一些修复javascript使其正常工作：

以下代码适用于较小的图像（例如）

但对于较大的图像，平移（-50%，-50%）变换会将图像平移过其父图像的左边缘和上边缘

.lightboxRoot {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;
    /*aesthetic*/
    background-color: red;
}
.lightboxImg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    /*aesthetic*/
    background-color: blue;
}

html:

---

回想起来有点傻：只需创建一个不能比父元素大的包含div，并确保它设置了overflow属性，以便获得滚动条。这样，内部的图像就可以达到它想要的大小：

以及html：

<div class="lightboxRoot">
    <div class="lightboxContainer">
        <div>
            <img id="imgElt" src="foo"></img>
        </div>
    </div>
</div>

---

在这种情况下需要解决的一件事是，我仍然希望div的滚动以纯CSS为中心，但这是一个很好的第一步。

其中JS正在更新

滚动顶部和
滚动左侧的位置，以便将滚动设置为img的中心。
谢谢！我应该澄清一下，我很想使用纯CSS，但我不认为有办法做到这一点（我看到了一些关于使用锚的东西，但它似乎不雅观）
.lightboxRoot {
    position: fixed;
    width: 100%;
    height: 100%;
    /*aesthetic*/
    background-color: red;
}
.lightboxContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    /*aesthetic*/
    background-color: blue;
}

<div class="lightboxRoot">
    <div class="lightboxContainer">
        <div>
            <img id="imgElt" src="foo"></img>
        </div>
    </div>
</div>