CSS：相对于两个周围 div 的外部的 100% 高度？

Question

我整个下午都在为此苦苦挣扎，所以我想我会寻求帮助...

基本上，我有以下结构：

<div id="gallery">

  <div class="product">
    <img ... />
    <div class="caption">
      <p>some text</p>
    </div>
  </div>

  <div class="product">
    <img ... />
    <div class="caption">
      <p>some text</p>
    </div>
  </div>

</div>

简而言之，我想实现以下目标：

• 外部容器 (div#gallery) 随浏览器窗口缩放（高度：100%；）。
• 图像相对于外部容器 div#gallery 缩放（高度：100%；宽度：自动；），从而使它们具有响应性。
• 每个内部容器 (div.product) 的宽度紧紧地包围了其中包含的图像。
• 字幕 (div.caption) 相对于 div.product 定位为“绝对”（它们被透明背景覆盖，但这不是重点）。

第一次尝试：我可以简单地编写以下 CSS：

div#gallery {position: relative; height: 100%; ...}
img         {height: 100%; width: auto;}
div.caption {position: absolute; width: 100%; ...}

这样，div.product 将是“静态的”，并且图像将相对于 div#gallery 定位。不幸的是，我需要 div.product 是“相对”的 div.caption 才能工作。所以...

div#gallery {position: relative; height: 100%; ...}
div.product {position: relative;}
img         {height: 100%; width: auto;}
div.caption {position: absolute; width: 100%; ...}

嗯，div.caption 现在可以工作了，但是 img 的高度现在是相对于 div.product 的，它不会缩放。所以，让我们添加...

div#gallery {position: relative; height: 100%; ...}
div.product {position: relative; height: 100%; width: auto;}
img         {height: 100%; width: auto;}
div.caption {position: absolute; width: 100%; ...}

现在，这应该真的有效，不是吗！？嗯，差不多。还有一个奇怪的地方：在调整浏览器大小时， div.product 的高度会按原样缩放，但宽度仍固定在其中包含的图像的原始宽度！

这就是我卡住的地方。有什么想法吗？

非常感谢您！

编辑：根据两个建议，现在有一个 jsFiddle 来说明这种情况：http://jsfiddle.net/marccee/vx5DC/2/

Answer 1

我正在尝试关注您的帖子，但里面有很多信息！

看看这是否在正确的轨道上：http://jsfiddle.net/derekstory/vx5DC/1/

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
#gallery {
    height: 100%;
    width: 100%;
}
.product {
    background: #333;
    height: 100%;
    width: 100%;
}
.image {
    position: absolute;
    background: #777;
    height: 100%;
    width: 100%;
}
.caption {
    background: rgba(111, 444, 333, .1);
    width: 100%;
    height: 100%;
    position: absolute;
}