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

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

1 个答案: