时间戳

首页 > 解决方案 > 在 Bootstrap 中以一定的精度将图像定位在彼此之上

html - 在 Bootstrap 中以一定的精度将图像定位在彼此之上

问题描述

我试图以某种程度的精确度将两个图像放在一起。

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

两个图像都在响应式网格中，并且基础图像应该始终居中。

例如，假设我试图瞄准臀部。 在此处输入图像描述

每当我缩小页面时，正确的图像会出现在下方（这正是我想要的），而圆圈会出现在其他地方（在本例中是手）。在此处输入图像描述

这是我的代码：

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

如何将红色圆圈定位在男人的顶部，以便在我拉伸或收缩页面时始终保持在同一个位置？

非常感谢您提前。

标签： htmlcssbootstrap-4

解决方案

我猜你的两张图片使用不同的参考点来确定它们的位置。此外，要使其响应，您需要以百分比表示所有内容。

第一部分。通过position:absolute在您的圈子上进行设置，您将其参考点更改为具有position:relative或position:absolute设置在其上的下一个容器。在您的情况下，没有，因此它使用页面，整个文档作为其参考点。如果圆圈有页面的参考点，而图像有其父级的参考点，当你调整大小时，它们将锚定到不同的点，你永远不会让它们对齐。

此外，由于您希望它具有响应性，因此您的所有测量都需要以 % 为单位。left:100px已在您的圈子上设置，当您开始调整大小时将不起作用。您需要获取该transform属性的确切位置，或者将您的left属性更改为百分比。

推荐阅读