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%不起作用。使用此规则时图像消失的原因是因为元素实际上具有 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;
}

匹配高度为100％宽度

2 个答案: