javascript - Firefox 中的图像不遵守最大高度

Question

div 中包含的肖像 img 无法正确设置其高度...仅在 FF(27.0.1) 中。适用于 Chrome 和 IE8。

我有以下内容:

html, body {
  margin: 0;
  border: 0;
  padding:0;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.photo-container {
  position: absolute;
  right: 0;
  top: 0;
  width: 79%;
  height: 100%;
  overflow-y: auto;
}
img#photo {
  margin-top: 0.5%;
  max-width: 100%;
  max-height: 95%;
}

在 html 中...

<div class="photo-container">
  <div id="pic"></div>
</div>
<script type="text/javascript">
    function f_pop(theImg) {
      document.getElementById('pic').innerHTML = "<img id='photo' src='" + theImg + "' alt='photo'>";
    }

http://jsfiddle.net/isherwood/sFZgn

注释:

• 照片为纵向。
• 这适用于 Chrome 和 IE8，但不适用于 FF 27.0.1
• 在 img#photo 中，我将高度更改为 50%。 Chrome 和 IE8缩小照片尺寸。在 FF 中它被 chop (并且需要 div 的滚动条向下移动)。

我最初将其(没有照片容器)作为框架集中的页面，即层次结构为body, div id=pic。它在 FF 的设计中发挥了作用。我将框架集转换为具有两列 (div) 的单个页面，右侧是照片容器，现在它在 FF 中不起作用。

非常感谢您的帮助。

谢谢。

Answer 1

您需要设置#pic的高度:

#pic {
    height: 100%;
}

http://jsfiddle.net/isherwood/sFZgn/2/