html - 如何调整背景图像的大小以适合 CSS 2 中的元素(未设置宽度)？

Question

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

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

我知道我可以调整图像大小，然后简单地应用它，但是，我不确切知道元素的大小是多少(我不介意将高度设置为“px”值，但我总是使用宽度的百分比，即使对于 body 元素也是如此 [没有人喜欢水平滚动条!])。

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

有没有办法在不依赖 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/