html - 图像不尊重它的 parent 的大小

Question

我正在使用 flexslider 并将 img 包装在显示为内联 block 的 div 中。这样，我可以在同一个 div 中包含其他元素(悬停按钮)并将它们相对于该元素定位。 它在 Chrome 上按预期工作，但在 Mozilla 上，图像似乎忽略了对其父元素设置的任何高度或宽度限制，并以全尺寸显示。 这是模仿该问题的快速代码笔。
http://codepen.io/spylefkaditis/pen/HysBi

同样，这在 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>  

SCSS:

*{
  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;
      }
      */
    }
  }
}

Answer 1

您需要为 .image 元素设置一个高度值，如下所示:

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

否则，div.image 会扩展其高度以容纳内容，在本例中为大图像。

参见演示:http://codepen.io/anon/pen/Hptco

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