IE7中的图像高度

Question

我一直试图通过绝对定位img标签来创建一个可伸缩的背景图像，并给它一个100％的宽度和高度：

<div class="item">
    <div class="background">
        <img src="http://placehold.it/100x100" width="100%" height="100%" style="width: 100%; height: 100%; border: 1px solid green;" />
    </div>
    <span class="text">
        aaa bbb ccc ddd
    </span>
</div>

这在IE8 +，Chrome和Firefox中运行良好，但不幸的是我也需要支持IE 7。

This JSFiddle演示了这个问题：调整图像大小以适应100％宽度，但保留其宽高比，如下：

如何使图像与包含div完全相同？请注意，如果我给包含div（.background）一个固定大小，问题就解决了，但是这会使根据文本调整大小的目的失败。

Answer 1

您还需要在包含div上设置高度（和宽度），而不仅仅是图像：

.background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100%;
    height:100%; /*This is the important bit */
}

http://jsfiddle.net/zPcwC/9/

此外，证明文本填满时仍然有效：

http://jsfiddle.net/zPcwC/10/

Answer 2

请参阅： http://jsfiddle.net/cqTTm/

在IE7 / 8/9，Firefox，Chrome，Safari，Opera中测试。

*property规则仅适用于IE7。

.item {
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    *height: 100%
}
.text {
    position: relative;
}

在.background上，可以使用普通height: 100%代替*height: 100%。我将它留给了需要它的唯一浏览器（IE7），以避免再次在所有这些浏览器中重新测试。

Answer 3

你为什么不这样做？

<div class="item">
  <div class="background">
    aaa bbb ccc ddd
  </div>
</div>

然后，在你的CSS中，你可以把

.background {
  background: transparent url(placeholder.jpg) no-repeat top left;
}

这样，图像被固定为.background div中的背景图像。背景div中的内容将拉伸它，仅显示背景图像的一部分。

这是你要问的吗？