使用css将div设为img，不使用js获取图像大小并设置div

Question

是否可以使容器适合与包含图像相同的尺寸，而无需将图像的宽度和高度明确设置为容器？

<div id="imageContainer" style="background-color:black">
<img id="image" src="11.jpg"/>
</div>

Answer 1

<style>
#imageContainer{ display:inline-block; }
#image{ display:block; }
</style>

http://jsfiddle.net/dBLsP/1/

要使它在旧版浏览器中运行，您也可以使用它：

<style>
#imageContainer{
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
}
</style>

reference

Answer 2

您可以使用

<style>
   .imageContainer{
      float:left;
    }
</style>

或

<style>
   .imageContainer{
       position: absolute
    }
</style>

或使用内联的其他元素，如<span>