javascript - 具有动态大小的图像的完整图像标题

Question

我有这个代码：

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;
}

你可以在这里找到它：

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

只希望标题与图像的高度和宽度相同，将其重叠并且不更改图像的自动调整大小。

有没有办法让它与 CSS 一起工作？

谢谢

Answer 1

我猜你已经要求这个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;
}