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