将高度与 100% 宽度匹配

Question

我正在向投资组合网站添加一些图像，但想使用背景图像来反对 img 属性。该网站反应灵敏，并使用百分比作为其基本结构。我正在使用 background-img 属性并将容器的宽度设置为其父级的 100%。添加设置高度使图像可见，但是添加 height:100% 或 height: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% 不起作用，除非父元素具有明确的高度。使用此规则时图像消失的原因是该元素实际上没有 no 高度。

不过，你可以使用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;
}