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

【问题标题】：contain an Image whose size is dynamic inside a Div包含一个在 Div 中大小是动态的图像
【发布时间】：2013-11-04 11:57:11
【问题描述】：

我正在开发这个模态图像查看器。问题是我无法添加将作为图像容器的 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;
}

谢谢。

【问题讨论】：

标签： css

【解决方案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/

【讨论】：

有个小问题。 div 正在扩展到与浏览器相同的大小，并且图像也在其中 100%。我需要图像大小是最大高度 80% 并且 div 只包含它..
我放了一个 jsfiddle 给你看。它正在工作，您是否有其他代码可能会干扰？
我又用小提琴提出了这个问题。看这里stackoverflow.com/questions/19761308/…
同一个问题不要发两次，直接编辑原题