IE7中的图像高度

如何解决IE7中的图像高度

| 我一直在尝试通过绝对定位

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。 此JSfiddle演示了以下问题：调整图像的大小以适合100％的宽度，但是保留其长宽比，如下所示： 如何使图片与包含div的图片完全相同？请注意，如果我给包含的div（

.background

）设置了固定的大小，则此问题已解决，但是这违背了根据文本调整大小的目的。     

解决方法

        请参阅：http：//jsfiddle.net/cqTTm/ 在IE7 / 8/9，Firefox，Chrome，Safari，Opera中进行了测试。 “ 3”规则仅适用于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），以避免再次在所有这些浏览器中进行重新测试。     ,        您还需要在包含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/     ,        你为什么不这样做呢？

<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中的内容将对其进行拉伸，仅隐藏背景图像的一部分。 这是您要问的吗？