Question

我希望制作一个图像查看器，使图像居中，无论图像有多大，并允许滚动查看整个图像。

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

这是一个小提琴，有一些修复javascript使其工作：http://jsfiddle.net/d3y0b8bd/

以下代码适用于较小的图片（例如https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png）

但是对于较大的变换，平移（-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的中心。

Answer 2

想出来，回想起来有点愚蠢：只需创建一个不能包含父元素的包含div，并确保它设置了溢出属性，以便获取滚动条。然后里面的图像可以变得很大：http://jsfiddle.net/abrady0/d3y0b8bd/2/

.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;
}

和html：

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

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

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

2 个答案: