2

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

基本上，我有以下结构：

<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/

4

1 回答 1

2

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

看看这是否在正确的轨道上：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;
}
于 2013-06-20T20:30:02.377 回答