Html 图像不考虑其大小'；父母

我使用flexslider，将img包装在一个显示为内联块的div中。这样，我就可以在同一个div中包含其他元素（悬停上的一个按钮），并将它们相对定位。 它在Chrome上可以正常工作，但在Mozilla上，该图像似乎忽略了对其父元素设置的任何高度或宽度限制，并以全尺寸显示。 这里有一个模拟问题的快速代码笔。

同样，这在Chrome上很好，但在Mozilla上不行。 有什么想法吗

HTML：

<ul>
  <li>
    <div class="image">
      <img src="http://lorempixel.com/1200/1800/" alt="" />
<!--      <a href="#" class="btn">button</a>
      <div class="modal">
        <p class="message"></p>
      </div>-->
    </div>
  </li>
</ul>  

*{
  box-sizing:border-box;
}
html,body{
  height:100%;
  width:100%;
}

ul{
  margin:0;
  padding: 0;
  width: 100%;
  height:100%;
  list-style-type:none;


  li{
    display:inline-block;
    position:relative;
    height:100%;
    width: 100%;
    text-align:center;

    .image{
      position:relative;
      display:inline-block;
      text-align:center;

      img{
        display: inline-block;
        max-height:100%;
        width:auto;
      }
/*      
      .btn{
        position:absolute;
        left:0;
        bottom:0;
        background-color:black;
      }
      */
    }
  }
}

---

您需要为

.image

元素设置一个高度值，如下所示：

.image{
  position:relative;
  display:inline-block;
  text-align:center;
  height: inherit;
}

否则，

div.image

会扩展其高度，以便容纳内容，在本例中是大图像

请参见演示：

---

我在Firefox和Chrome上进行了测试，它似乎工作正常。

谢谢你的回复。我以前确实使用了100%的高度，这似乎解决了这个问题，只是现在在img元素的两侧有了额外的间距。这是我的意思的截图。我看到了

img

和

.image

之间的额外空间问题，我不确定它来自哪里。但是，我确实发现，通过将

.image

的宽度设置为

10px

这样的小值，它会强制

.image

元素收缩，结果是图像溢出，并且侧面没有空白。而且，Firefox和Chrome之间的行为并不完全一致。我还发现，通过增加窗口的高度，图像大小会增加，空白最终会消失。在这一点上，我不能做更多的事了…谢谢你试着帮助这个男人。我正在考虑把JS放在上面，让它工作起来。当它怀疑JS。。。