问个关于DIV加了z-index后的有关问题 _HTML/CSS

问个关于DIV加了z-index后的问题
最近遇到了个问题，望高手解答写，请先看下面的代码
<div class="out">
<img/>
<div class="in"></div>
</div>
我做的是一个图片上加文字的效果，in利用z-index浮文字在img上面
由于out没有给高度，这样就造成了img挡住了之后的元素。
如果给out加高度就可以正常显示，但是因为有很多不同的图片，out需要不同的高度，所以不能给定高度...
不知道表达清楚没有，望高手解决

div? z-index

------解决方案--------------------
img 挡住后面的元素，这不科学啊。后面的 .in 设置 position:absolute;top:0;left:0;

<style>

.out{position:relative;}

.out .in{position:absolute;top:0;left:0;z-index:1;font-size:30px;background-color:rgba(255,0,0,.3);color:#fff;}

</style>

<div class="out">

	<img src="http://img.china.alibaba.com/images/trade/other/091231/test1.jpg" width="100" alt="" />

	<div class="in">cover</div>

</div>



<div class="out bd">

	<img src="http://img.china.alibaba.com/images/trade/other/091231/test2.jpg" width="200" alt="" />

	<div class="in">cover</div>

</div>