如何在使用绝对定位元素调整布局大小时保持比例

Question

我已经交了一堆页面来编写奇怪的不规则布局。以下是我需要创建的示例。

关键点是：

• 根据模型，元素需要按像素完美定位。
• 在调整窗口大小时，所有元素和位置都需要向下/向上调整大小 成比例。
• 容器的大小也需要按比例调整，因为布局下会有更多内容。

考虑到每个元素需要具有特定的定位，使用绝对定位是显而易见的。我还注意到，由于布局需要保持成比例，因此需要按百分比进行定位。

对于图像，我可以将宽度设置为百分比和高度自动。元素可以沿x轴以百分比定位。

但是当我需要从顶部定位时会出现问题。

如果我声明一个元素从顶部开始说是20％，那么当我调整页面大小时，这个定位不会按比例改变。此外，包含块需要具有声明的高度。

我能看到这个工作的唯一方法是使用一些javaScript技巧。

但这对于看似简单的布局来说似乎很挑剔。并且不建议依靠javaScript来维护布局。

必须有一个更好的解决方案，我经常看到不规则的布局。

我已经研究过Flexbox，但我想不出它在这种情况下如何帮助我。

你会如何处理这种布局？

Answer 1

您可以将所有内容都包装在使用“padding-bottom trick”的包装器中，以根据其宽度保持其比例。由于父元素的高度现在取决于文档的宽度，因此您为子元素的top和bottom属性提供的所有百分比值都会受到页面宽度的影响，而不是高度。

main {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 120%;
}

div {
  background: red;
  position: absolute;
}

.one {
  width: 40%;
  height: 40%;
  top: 10%;
  left: 40%;
}

.two {
  width: 50%;
  height: 20%;
  top: 55%;
  left: 15%;
}

.three {
  width: 20%;
  height: 30%;
  top: 60%;
  left: 70%;
}

<main>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</main>

Answer 2

尝试使用此技巧按比例缩放容器

<div class="container">
  <div class="container-inner-wrap">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

.container {
  position: relative;
  display: inline-block;
  width: 75%; // Choose the width you want.
}

.container:after {
  padding-top: [$height / $width * 100] %;
  content: '';
  display: block;
}

.container-inner-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

其中$ height和$ width是数字 - 您希望容器的高度和宽度的值。当你将理想高度除以宽度并乘以100％（单位将是％）时，你应该放在那里的真正价值。你得到的是你的容器的纵横比，无论你的浏览器大小如何，它都将保持这种大小和形状。

你也可以在你的所有盒子上使用它，只要确保你的内包装绝对位于里面。如果我正在构建这个布局，我肯定会使用这个技巧。

以下是使用此功能的其他人的示例：http://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements/