我如何在CSS 2中调整背景图像以适应我的元素（没有设置宽度）？ [英] How can I resize a background-image to fit my element (without set width) in CSS 2?

问题描述

我的问题是我必须保持与IE 8兼容，所以没有CSS3只会回答。

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

我知道我可以调整图像大小然后简单地应用它，但是，我不知道元素的大小究竟是什么（我不介意将高度设置为px值，但我总是使用具有宽度的百分比，即使对于body元素也是如此（无人喜欢水平滚动条！）） 。

我必须在这个背景图片上放置一些文字，所以我也试着插入一个< img> 标签，然后将文本放在span元素中，使用 position：absolute; 但我怀疑使用 left 和 top 属性改为micromanage类型，这种定位在所有浏览器，屏幕大小和屏幕分辨率上看起来都是一样的（请纠正我，米错了，但这会成为一个公共场所，并且必须看起来每个人都一样）。如前所述，如果我可以放心，无论用户的个人浏览器，屏幕或分辨率选择如何，使用定位都将保持一致，我并不反对使用此方法。

有没有办法在不依赖CSS3的情况下处理这个问题？

我不认为有任何理由发布任何标记或CSS，但让我知道它是否会有所帮助，我会很乐意的。

为了澄清：我需要整个图像适合元素，而我并不是真的关注宽高比。

解决方案

您可以很简单地做到这一点：

< html：

 < div class =holder> 
< img src =http://www.lorempixel.com/400/200//> 
< div class =text>测试文字< / div> 
< / div> 
  

css：

  .holder {position：relative;宽度：100％; overflow：hidden;} //这里有隐藏的溢出，所以它把图像当作背景对待并隐藏任何额外的
 .holder img {position：absolute;左：0;顶部：0;宽度：100％; z-index：1;} 
 .holder .text {position：relative;的z-index：2; text-align：center;} //这是相对位置，所以div增长到文本的大小
  

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

My problem is that I have to remain compliant with IE 8, so no CSS3 only answers will do.

I know that I can use the background-image property, but I can't use background-size property, as it is CSS3 only.

I know that I can resize the image and then simply apply it, however, I don't know exactly what the element's size will be (I don't mind setting height to a "px" value, but I always use percentages with width, even for the body element [nobody likes a horizontal scroll-bar!]).

I have to center some text over this background-image, so I also tried just inserting an <img> tag and then putting the text in a span element with position: absolute; but I doubt that using the left and top properties to kind-of "micromanage" this positioning will prove to look the same in all browsers, screen sizes, and screen resolutions (please, correct me, if I'm wrong, but this will be a public site, and has to look the same for everybody). That having been said, I am not opposed to using this approach if I can be assured that using positioning will look the same, regardless of the user's personal browser, screen, or resolution choices.

Is there any way to handle this without relying solely on CSS3?

I don't think there is any reason to post any markup or CSS, but let me know if it would help and I'll be happy to.

Just to clarify: I need the whole image to "fit" in the element and I am not really concerned about aspect ratio.

解决方案

You can do this quite simply:

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/

这篇关于我如何在CSS 2中调整背景图像以适应我的元素（没有设置宽度）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！