如何制作液体，居中，带有标题覆盖图的图像？

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进行对齐和定位。