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瀏覽器似乎忽略它。