full image caption for images with dynamic size

Question

I have this code:

HTML

<div id="wrapper">
  <div class="box">
    <img src="http://tukaki.pawlusmall.com/images/image1.png"/>
    <span class="caption">
        <p>caption</p>
    </span>
  </div>
  <div class="box">
    <img src="http://tukaki.pawlusmall.com/images/image2.png"/>
    <span class="caption">
        <p>caption</p>
    </span>
  </div>
  <div class="box"> 
    <img src="http://tukaki.pawlusmall.com/images/image3.png"/>
    <span class="caption">
        <p>caption</p>
    </span>
  </div>
</div>

CSS

.box {
    position: relative;
    width: 30%;
    height: auto;
    display: inline-block;
}

.box img {
    height: auto;
    width: 100%;
    position: absolute;
    left: 0;
}

.box span {
    position: absolute;
    width: 100%;
    height: auto;
    color: #FFF;
    left: 0;
    background-color: #FF0000;
}

You can find it here:

http://jsfiddle.net/v2Vk3/3/

Just want the caption to be the same height and width as the image, overlaping it and without changing the automatic resizing for images.

Is there any way to get this working with CSS?

Thx

Answer 1

I guess you have asked for this http://jsfiddle.net/6hgCj/

.box {
position: relative;
width: 30%;
height: auto;
display: inline-block;
}

.box img {
height: auto;
width: 100%;
}

.box span {
position: absolute;
width: 100%;
height: 100%;
color: #FFF;
left: 0;
top:0;
background-color: #FF0000;
}