匹配高度为100％宽度

Question

我在一个投资组合网站上添加了一些图像，但是想要使用背景图像来反对img属性。 该网站非常敏感，并使用百分比的基本结构。 我使用background-img属性并将容器的宽度设置为其父级的100％。 添加设置高度会使图像可见，但是添加高度：100％或高度：auto会使图像消失，我确信这可能是一段非常简单的代码，但我似乎无法找到解决方案。 下面是我用来实现图像的代码

.image-left {
    float:left;
    width:100%; height:100%;
    background-image:url(/img/image.jpg);
    background-position: center top;
    background-size: 100% 100%;
} 

这里有一个http://jsfiddle.net/WD4HM/3/来更好地解释我的问题。

任何帮助将不胜感激，谢谢你们。

Answer 1

height: 100%不起作用，除非父元素具有显式高度。 height. 使用此规则时图像消失的原因是因为元素实际上高度。

但是，您可以使用javascript捕获窗口高度，然后匹配您想要100％窗口高度的元素。

Answer 2

新答案：

#wrap {
 width:50%; 
 margin:0 auto; 
 overflow:hidden; 
 background:blue;
}
.img-left {
 float:left;
 width:100%;
 height: 100%; 
 background-image:url(tiger.jpg);
 background-position: center top;
 background-size: 100% 100%; 
 margin-bottom:45px;
}