javascript - 如何将大于屏幕的可滚动图像居中

Question

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

我遇到的问题是，虽然将小于容器的图像居中很容易，但当它们变大时，我正在将图像定位在屏幕的右侧和顶部。

这是一个 fiddle ，它有一些修复 javascript 以使其工作:http://jsfiddle.net/d3y0b8bd/

下面的代码适用于较小的图像(例如 https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png)

但对于更大的图像，translate(-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 class="lightboxRoot">
    <div class="lightboxImg">
        <img id="imgElt" src="http://upload.wikimedia.org/wikipedia/commons/6/65/Cute_beagle_puppy_lilly.jpg"></img>
    </div>
</div>

Answer 1

here's a fiddle其中 JS 正在更新 scrollTop 和 scrollLeft 的位置，以便将滚动设置为 img 的中心。