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

Question

我尝试使用 CSS 显示以标题覆盖为中心的图像，并在浏览器窗口太小时（缩小以适应）时显示液体功能。

我当前的最佳尝试看起来像以下 HTML（使用 Google 的徽标作为示例图像）

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