如何在CSS 2中调整背景图像的大小以适合我的元素（不设置宽度）？

Question

我的问题是我必须保持与IE 8的兼容，因此没有CSS3仅答案可以。

我知道我可以使用background-image属性，但是不能使用background-size属性，因为它仅是CSS3。

我知道我可以调整图像的大小然后简单地应用它，但是，我不知道元素的大小到底是什么（我不介意将height设置为“ px”值，但是我总是使用百分比和宽度，甚至对于body元素[没人喜欢水平滚动条！]）。

我必须在此背景图像上居中放置一些文本，因此我也尝试仅插入<img>标记，然后将文本放置在position: absolute;的span元素中position: absolute; 但我怀疑使用left和top属性来进行“微观管理”，在所有浏览器，屏幕尺寸和屏幕分辨率中，这种定位都将看起来相同（请纠正我，如果我错了，但是这会成为公共网站，并且每个人的外观都必须相同）。 话虽如此，如果我可以确保无论用户的个人浏览器，屏幕或分辨率选择如何，使用定位都会看起来一样，那么我不反对使用这种方法。

有什么方法可以在不完全依赖CSS3的情况下进行处理？

我认为没有任何理由发布任何标记或CSS，但是请告诉我是否有帮助，我会很乐意。

只是要澄清一下：我需要整个图像“适合”元素，并且我并不真正关心纵横比。

Answer 1

您可以非常简单地执行此操作：

HTML：

<div class="holder">
    <img src="http://www.lorempixel.com/400/200/" />
    <div class="text">Testing text</div>
</div>

CSS：

.holder {position:relative; width:100%; overflow:hidden;} //this has overflow hidden so it treats the image like a background and hides any extra
.holder img {position:absolute; left:0; top:0; width:100%; z-index:1;}
.holder .text {position:relative; z-index:2; text-align:center;} //this is positioned relative so the div grows to the size of the text

http://jsfiddle.net/UANFm/2/

Answer 2

没有javascript很难。

您可能可以将其添加为普通图像，将位置设置为相对，并在所有其他内容下对其进行z索引，然后将宽度设置为100％。 但这仍然是一种骇人听闻的方式，我尚未测试过。

编辑尝试此： http : //jsfiddle.net/xTgCY/

<div class="wrapper">
    <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSaATzueHSd2rQXCWUQXFXc1sFAx3tNXBj-px5bU64D4ji5rmF6cw">
        <div class="content">aihadfuigh iaghdf aoisyhif o[iayhdf oiahdfio sadf</div>
</div>

.wrapper {
    width: 300px;
    position: relative;
}
.wrapper img {
    position: relative;
    z-index: -5;
    width: 100%;
}
.content {
   position: absolute;
   z-index: 0;
   top: 0;
    left: 0;
    width: 100%;
}