如何製作液體，居中，帶有標題覆蓋圖的圖像？

Question

我正在嘗試用CSS來顯示以標題疊加圖層爲中心的圖像，並且在瀏覽器窗口太小（縮小到適合）時顯示液體功能。

我目前最好的嘗試看起來像下面的HTML（使用谷歌的標誌作爲樣本圖像）

<div align="center"> 
    <div class="container"> 
     <img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" /> 
     <h3 class="caption">Image Caption</h3> 
    </div> 
</div> 

與下面的CSS

.container { 
    position : relative; 
    max-width : 364px; 
} 
.picture { 
    border-radius:0.5em; 
    box-shadow: 0px 0px 0.5em #000000; 
    max-width:364px; 
} 
.caption { 
    position:absolute; 
    padding:0.25em; 
    top:1em; left:0; right:0; 
    color:black; 
    background-color:rgba(0,0,0,0.2); 
    text-align:center; 
} 

但是，如果行爲會爲中心的，因爲我希望它適用於大型瀏覽器窗口，它不會縮小瀏覽器窗口... 另外我不需要IE支持，WebKit專用（iPhone/Android）就足夠了，如果可能的話，我想盡量避免使用JavaScript 。

的jsfiddle準備與版本玩http://jsfiddle.net/kWH3C/1/

Answer 1

剛剛成立的最大寬度，以容器而不是圖像，並告訴圖像是width:100%

http://jsfiddle.net/Madmartigan/kWH3C/5/

<div class="container"> 
    <img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" /> 
    <h3 class="caption">Image Caption</h3> 
</div> 

.container { 
    position : relative; 
    max-width : 364px; 
    margin:0 auto; 
} 
.picture { 
    border-radius:0.5em; 
    box-shadow: 0px 0px 0.5em #000000; 
    width:100%; 
} 
.caption { 
    position:absolute; 
    padding:0.25em; 
    top:1em; left:0; right:0; 
    color:black; 
    background-color:rgba(0,0,0,0.2); 
    text-align:center; 
} 

你不需要外部div，並且align="center"在HTML5中已棄用，請使用CSS進行對齊和定位。