CSS图像大小？

Question

There...

#logoWrapper{
  background-image: url(../image/bg_img.jpg);
  height:86px;
  width:100%;
  }

问：如何使图像的大小自动与其包装器#logoWapper相同？

#logoWrapper img{       // not work
  height:86px;
  width:100%;
  } 

谢谢！

- SoonYeoung

---

请发布完整的CSS类。 - kheya

我想补充一点，#logoWrapper img会影响#logoWrapper内所有的<img>标签..因此不会影响任何CSS背景图片。在这种情况下，使用<img>标签很可能是正确的选择。 - Joonas

Answer 1

如果您想要在CSS3中使用背景图像并且希望拉伸而不是重复，则可以使用background-size: 100%;

此处有文档：http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

或者，您可以在相对定位的div内添加一个绝对定位的图像，并添加一个额外的包装器。

<style>
#wrapper {
position:relative;
...
}
#wrapper div, #wrapper img {
position:absolute;
top:0px;
left:0px;
...
}
</style>

<div id="wrapper">
<img ... >
<div> this goes on top of image</div>
</div>

- Wayne

---

#logoWrapper{ background-image: url(../image/bg_img.jpg); height:86px; width:100%; background-size: 100%; } 谢谢！你的意思是像这样吗？但是不起作用... - SoonYeoung

根据w3schools的说法：“background-size属性在IE9+，Firefox 4+，Opera，Chrome和Safari 5+中受支持。”如果您希望在所有浏览器中都能正常工作，您应该像Wayne建议的那样，在div内使用img。 - Pianosaurus

如果使用的CMS系统只提供对CSS而不是HTML的访问权限，则可能需要使用Lollero。不幸的是，早期版本的CSS不允许调整背景图像的大小...但您可以将它们的background-position设置为中心，并允许左右两侧裁剪更多或更少的材料。 - Wayne

@Wayne 非常正确，虽然我相信大多数/很多网站至少允许在标志区域插入图片。我还很好奇的第二件事是为什么大小需要由外部元素定义...我可以想象这种情况，但我不太清楚为什么会有这样的情况。 - Joonas

@Lollero 我从问题中做出了一个假设，即需要将文本或某些材料放置在图像上，这就是为什么图像需要成为背景的原因。...我自己也遇到了许多次这样的需求...因此，使用包装器将img作为背景层叠，div放在顶部...相对定位的包装器成为任何绝对定位内容的左上角。无论在html中编码的是什么，都将成为背景，其他元素按照它们的方式工作，最终一个在顶部。 - Wayne