完整圖像標題

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與CSS一起工作？

THX

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