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％高度和宽度。

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

我需要图像显示其父级和自动宽度的100％高度，同时居中 - 但我正在努力实现这一目标 -

我有以下用于img标签的CSS -

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

我得到的是原始图像高度的居中图像..任何人都可以建议我哪里出错？

Answer 1

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

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

transform会使img居中，顶部和底部设置为零会强制它在其父级的100％高度。

试验

height: 100%在FF中运行良好但webkit浏览器似乎忽略了它。

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

1 个答案: