Question

好的..所以我有点新手但不是真的。在'04 -06'中有很多html编码...决定再次拿起它。如果我没有意义，请告诉我。我有一个客户想要一个“灯箱”效果图片库为他们的照片。例如：当您单击缩略图时，较大的图片会放大，而背景会逐渐淡出。我决定看看我是否可以在css3中编码，而不是诉诸于javascript或诸如此类的东西。我知道这可能是不切实际的..但客户端没有那么多图片，想要一个相当简单的网站。

大部分时间都很顺利..除了引入大局之外。我希望这张照片以页面为中心...但是当我从0px转换到400px时会发生一些愚蠢的事情。它似乎在向左和向下延伸的同时向右和向下生长。任何使这种成长为中心的方法。我知道我可以跳过宽度和高度调整，只使用不透明度转换..但这看起来并不酷。

这只是早期阶段，所以我没有使用其他浏览器进行测试..而且我知道我需要添加更多代码才能在其他浏览器中使用..但我现在正在使用chrome如果这有帮助。

<!DOCTYPE html>
<html>
<head>
    <title>LIGHTBOX</title>
    <style>
            html{
                height:100%;
            }

            img{
                max-height:100%;
                max-width:100%;
            }

            .centerimage{
                    display:block;
                    margin-left:auto;
                    margin-right:auto;   
            }

    #imagezoom {
        position: absolute;
                    margin:-200 0 0 -200;
                    top:50%;
                    left:50%;
        z-index:-1;
                    padding-right:0;
                    border: solid 5px white;
        overflow: hidden;
                    width: 0px;
                    height: 0px;
                    opacity: .0;
                    box-shadow: 0px 0px 500px 50px #888888;
        transition: opacity .7s, width 1.5s, height 1.5s; 
    }

            #imagezoom:target{
                    z-index:2003;
                    width: 400px;
                    height: 400px;
        opacity: 1.0;
            }

</style>
</head>
<body>


    <div id="imagezoom">
        <a href="file://localhost/Users/hollykrahulik/Desktop/
test%20website%20stuff/lightbox2.html">
        <img src="images/grumpycat.jpg">
        </a>
    </div>

<a href="#imagezoom">
        <img src="images/grumpycat_thumb.jpg" class="centerimage">
    </a>
</body>
</html>

Answer 1

您在margin:-200 0 0 -200;上错过了此#imagezoom。

这是working example

编辑：我假设你想要这个作为输出。 Working Fiddle

#imagezoom:target{
    margin:-200px 0 0 -200px;
}
#imagezoom {
    transition: opacity .7s, margin 1.5s, width 1.5s, height 1.5s; 
}

当使用过渡调整高度和宽度时，如何居中（保持居中）<div>或img。</div>

1 个答案: