2

我正在尝试构建一个页面以并排显示两个图像。我希望这些项目以书本格式在屏幕上居中，并且随着浏览器大小的调整，图像高度会发生变化，因此它们会填满窗口。

为了做到这一点，我使用带有文本对齐中心的显示内联块来实现效果。它在 FF 上运行良好，但是当我在 Safari 或 Chrome 中打开调整大小时，div 开始重叠。我创建了这个 jsfiddle 来展示我的 dom 示例。我需要 pageOne 和 pageTwo div 内联块，因为后来我绝对将链接放在页面图像的顶部。

我错过了什么？

为了看到这个问题，您需要在 safari/chrome 中打开 jsFiddle 并使结果窗格大于默认值。从浏览器开始，大约为正常宽度/高度的 1/2。运行 jsFiddle 时，放大浏览器并注意两个图像是如何开始重叠的。如果你在 FF 中打开它，它们不会重叠。

http://jsfiddle.net/X9NNh/1

使用表格，我能够在所有浏览器中接近我想要的效果：

http://jsfiddle.net/x82uK/

4

1 回答 1

1

实际上，这很棘手，因为这些内联块容器不会随着内容的缩放而调整自己的大小以适应其内容。

虽然当涉及到绝对定位图像顶部的链接时，它会使您的工作更加困难（阅读：需要 Javascript），但这里有一种使用background-size: contain.

HTML：

<div id="issue">
  <div id="leftPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div>
  <div id="rightPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div>
</div>

CSS：

html, body {
  height: 100%;
  background: #666;
}
#issue {
  position: absolute;
  top: 20px; bottom: 20px;
  left: 20px; right: 20px;
  border: 1px solid grey;
  box-sizing: border-box;
  background: #EEE;
}
.page {
  position: absolute;
  top: 30px; bottom: 30px;
  background-repeat: no-repeat;
  background-size: contain;
}
#leftPage {
  background-position: center right;
  left: 30px; right: 50%;
}
#rightPage {
  background-position: center left;
  left: 50%; right: 30px;
}
于 2012-07-04T01:02:38.590 回答