Question

我试图以一定的精确度将两个图像彼此重叠放置。

问题是，顶部图像（圆圈）到处都是

两个图像都位于响应网格中，并且基本图像应该一直居中。

例如，我要瞄准臀部。

每当我缩小页面时，右边的图像就会在下面（这正是我想要的），而圆圈会在其他位置（在这种情况下是手）。

这是我的代码：

/* No-margins Class Rules */

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutters>[class^="col-"],
.row.no-gutters>[class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}


/* Centers content */

.centered-img {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
}

.img-container {
  background-color: yellow;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}

.test {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 100px;
}

<!doctype html>
<html lang="{{ app()->getLocale() }}">

<head>
</head>

<body>
  <div class="container">
    <!-- global canvas -->
    <div class="row no-gutters">

      <div class="col-sm">
        <div class="centered-img">

          <img src="./images/fssFront.png" class="img-fluid" alt="Responsive image">
          <img src="./images/circle.png" class="test" alt="Responsive image">

        </div>
      </div>

      <div class="col-sm">
        <div class="centered-img">
          <img src="./images/fssBack.png" class="img-fluid" alt="Responsive image">
        </div>
      </div>

    </div>
  </div>
  <!-- global canvas -->
</body>

</html>

如何将红色圆圈放置在男人的上方，以便在我拉伸或收缩页面时始终将其放置在同一位置？

非常感谢您。

Answer 1

我猜您的两个图像使用不同的参考点来确定它们的位置。此外，要使其具有响应能力，您需要按百分比分配所有内容。

第一部分。通过在圆上设置position:absolute，可以将其参考点更改为设置了position:relative或position:absolute的下一个容器。在您的情况下，没有任何文件，因此它将页面（整个文档）用作参考点。如果圆具有页面的参考点，并且图像具有其父对象的参考点，则在调整大小时，它们将锚定到不同的点，并且永远不会使它们对齐。

此外，由于您希望它具有响应性，因此所有测量均需要以％为单位。 left:100px已设置在您的圈子中，当您开始调整大小时，该按钮将无效。您需要使用transform属性获取确切的位置，或者将left属性更改为一个百分比。

在Bootstrap中

1 个答案: