1

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

我的项目是为画廊制作灯箱效果，类似于 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;
}
4

0 回答 0