CSS图像百分比高度/宽度绝对父

Question

内基于我有以下HTML：

<div class="item active"> 
    <!-- Slide 0 --> 
    <div class="fill blur-me" > 
     <div class="non-blur"> 
      <img src="assets/img/backgrounds/test/20151015_124614.jpg" />  
     </div> 
    </div>    
</div> 

的.fill伪类是100％的高度和父的宽度。

The .non-blur class绝对定位，顶部填充为80px;和100％的宽度和100％的高度;

我需要的图像显示，同时被集中其父和经销商的宽度的100％的高度 - 但我在努力做到这一点 -

我有以下的CSS img标签 -

img{ 
     width:auto; 
     height:100%; 
     display: inline-block; 
     margin:0 auto; 
} 

ALl我得到的是一个居中的图像在原始图像的高度..任何人都可以提出我要去哪里错了？

Answer 1

实现100％高度的最佳跨浏览器方式是将元素绝对定位在父级中。

img { 
    position: absolute; 
    top: 0;bottom: 0; 
    width: auto; 
    left: 50%; 
    transform: translateX(-50%); 
} 

transform将使img中心和顶部和底部设置为零将迫使它是100％高度的它的父。

实验

height: 100%在FF中正常工作，但webkit浏览器似乎忽略它。