Question

我真的很难找到这个问题的答案，但我找不到任何类似的东西。

我的项目是为画廊制作灯箱效果，类似于Facebook在灯箱中显示图片的方式。我希望这能尽可能地响应。

我有一个灯箱，它在屏幕上保持一个固定的位置，并且根据显示器的大小具有固定的大小（以百分比表示）

灯箱分为左侧（显示图像）和右侧（显示注释和元信息。

这需要适用于各种宽高比。

如果图像小于灯箱的固定尺寸，我希望它垂直和水平居中。

如果任一图像尺寸大于灯箱的固定尺寸，则应将较大尺寸设置为灯箱尺寸，并设置较小尺寸以保持纵横比。

我遇到的问题是图像能够超过其容器的高度。

非常感谢任何有用的解决方案。

这是一个jsfiddle的链接，我试图这样做。

http://jsfiddle.net/bawmY/2/它是我实际代码的简化版本。

这是因为你不想在jsfiddle中看到它

<div class=lb>
    <div class=lbLeftSide>
        <div class=lbImageWrapper>
           <div class=lbImageContainer>
              <img class=lbImage src="http://hockinghillscabins-lodges.com/hocking-hills-airtours/hot-air-balloon-1.jpg">
           </div>
        </div>
     </div>
     <div class=lbRightSide>
         Some Content
     </div>
</div>

样式表

.lb{
    position:fixed;
    width:70%;
    height:70%;
    left:10%;
    top:10%;
    border:solid black 1px;
}

.lbLeftSide{
    float:left;
    height:100%;
    width:80%%;
    background-color:green;
}
.lbRightSide{
    float:left;
    height:100%;
    width:20%;
    background-color:red;
}

.lbImageWrapper{
    width:100%;
    height:100%;
    border:solid blue 1px;
    display:table;
}
.lbImageContainer{
    width:100%;
    height:100%;
    border:solid pink 1px;
    display:table-cell;
    vertical-align: middle;
}

.lbImage{
    max-height:100%;
    max-width:100%;
    min-width:0px;
    min-height:0px;
    margin-left:auto;
    margin-right:auto;
    opacity:.7;
}

如何保持图像垂直居中？如果它的大小大于容器，则水平调整大小

0 个答案: