Question

我正在尝试创建一个响应式垂直居中的灯箱，支持不同的图像尺寸和控制相对于图像定位而不使用javascript。

我在Safari中使用它，但遗憾的是，在Firefox和Chrome中，图像在高度方向上没有缩放，而且它的父级溢出。

以下是JSFiddle

这是我的代码：

.overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,.75);
    text-align:center;
    font-size:0;
}

.overlay:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.container {
    display:inline-block;
    vertical-align:middle;
    position:relative;
    box-shadow:0 0 5px rgba(0,0,0,.5);
    font-size:1rem;
    max-width:80%;
    max-height:80%;
}

.container img {
    vertical-align: bottom;
    max-width:100%;
    max-height:100%;
}

.container .caption {
    position:absolute;
    bottom:0;
    width:100%;
    background-color:rgba(0,0,0,.5);
}

.container .prev, .container .next {
    position:absolute;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.container .prev {
    left:0;
}

.container .next {
    right:0;
}

<div class="overlay">
    <div class="container">
        <img src="http://placehold.it/1920x1080" alt="" />
        <div class="caption">Some text...</div>
        <a class="prev" href="#">Previous</a>
        <a class="next" href="#">Next</a>
    <div>
</div>

如果没有javascript，甚至可以解决这个问题吗？

Answer 1

是的，这是一个解决方案（尽管我可以从你想要完成的事情中得知）：

<div class='container'>
   <img class='image' src='http://placehold.it/1920x1080'>
</div>

body, .container{
   position: absolute;
   width: 100%;
   height: 100%;
   overflow:hidden;
}
.container {
    top: 0;
    left: 0;
}
.image {
    position: absolute;
    max-width: 80%;
    max-height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

fiddle

垂直居中的响应式容器内的响应式图像

1 个答案: