css - 包含一个在 Div 中大小是动态的图像

Question

我正在研究这个模态图像查看器。问题是我无法添加将作为图像容器的 div。我需要这个 div 因为我想在其中添加导航按钮。关键是图像可根据浏览器大小调整大小。最大高度：80%；为图像 css 设置。 我需要 div 与动态图像的大小相同。 请告诉我该怎么做。

这是HTML

<div id="imagePlaceholderContainer">
    <img id="imagePlaceholder" src="images/full/Full28.jpg" />
</div>

这是CSS

#imagePlaceholder {
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    max-height: 80%;
    border: 5px solid black;
}

谢谢。

Answer 1

您需要将样式应用于 div 而不是图像

#imagePlaceholderContainer {
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    max-height: 80%;
    border: 5px solid black;
}

#imagePlaceholder {
    height:100%;
    width:100%;
}

JSFiddle：http: //jsfiddle.net/R49mW/

您从重复问题中分叉的小提琴：http: //jsfiddle.net/wwbd4/