Question

我正在设计一个带有％的流畅布局，其特色是书籍高度为窗口高度的50％，下一本书的四分之一只是可见的，诱人向下滚动。

调整窗口大小不应改变布局，因此书籍的图像大小，边距等应以％表示。

但是，为包含.books {position: absolute}设置div，所包含图片的大小会缩小为缩略图大小，尽管图片本身相当大......

％作为单位如何运作？我认为100％总是100％的含有元素。为什么position: absolute会改变这个？

第二个问题，即使使用％，只更改窗口宽度也会改变垂直布局。我曾假设垂直和水平方向是独立的。

以下是一些代码段。

<div id="container">
  <div class="books">
    <img src="..." />
  </div>
  <div class="books">
    <img src="..." />
  </div>
  <div class="books">
    <img src="..." />
  </div>
</div>

#container {
  height: 200%;
}
.books {
  height: 25%; /* =50% of window height */
}

编辑：我找到了罪魁祸首：我在％中分配了一个上边距，但所有（左下角）边距值都被定义为父级的宽度的％...奇怪。

Answer 1

要回答关于position: absolute的问题，元素相对于其第一个定位（非静态）祖先元素定位，因此包含div的％更改将影响图像大小。资料来源：click here

根据经验，您最终会遇到使用％width和height的各种浏览器的一些问题。根据所使用的检测设备修复尺寸和提供多个样式表可能是更好的方法。

Answer 2

你需要指定所有父母的高度，直到html，即

html, body{
    height: 100%;
}
#container {
    height: 200%;
}
.books{
    height: 25%; /* =50% of window height */
}
.books img{
    height: 100%;
}

如果更改为position：absolute，则父项将成为下一个位置父项，您可以通过将其设置为position：relative（或position：absolute）来指定它。上面的代码意味着调整窗口大小将改变布局。但你可以在链中的某个点设置一个特定的大小，或者用javascript做什么？

Answer 3

将此添加到您的css

.books img {width:100%; height:100%}

在CSS中使用％：position：absolute和image size

3 个答案: