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

我整个下午都在为这件事挣扎，所以我想我应该寻求帮助

基本上，我有以下结构：

<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.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说明了这种情况：

我正试图关注你的帖子，但是里面有很多信息

看看这是否在正确的轨道上：

---

如果您创建了一个您描述的最后/几乎工作状态的JSFIDLE，这将非常有用。谢谢您的建议。我对JSFIDLE没有太多的经验，所以我只是编辑了dwreck08的代码以更好地反映我的情况（感谢您的设置）。。。希望它能起作用：当调整浏览器窗口的大小时，可以看到问题：图像按应有的比例缩放，但周围的div.product却没有这样做。相反，它们似乎保持固定在图像的原始（！）宽度。感谢您的设置。我没有太多使用JSFIDLE的经验，所以我只是编辑了您的代码以更好地反映我的情况。。。希望它能起作用：当调整浏览器窗口的大小时，可以看到问题：图像按应有的比例缩放，但周围的div.product却没有这样做。相反，它们似乎保持固定在图像的原始（！）宽度。看看这是否更符合您的需要：嗯，这基本上是可行的，但不是我需要的方式。我需要图像的高度来拉伸以填充可用空间。宽度应相应调整。在您的情况下，宽度刻度和高度可以调整…感谢您的帮助。我注意到，您将.产品替换为.包含。。。你能简单地解释一下你想做什么吗？我不确定，您正在哪个浏览器中工作。。。我在Firefox中看到了这些图片，现在图片非常巨大。事实上，我希望图片的高度是#gallery.Wow的100%！那些是大的。我没有检查FF。铬看起来不错..哎呀。我想我只是不小心删除了.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%; ...}

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