Question

我只是想不出让响应图像位于另一幅响应图像中心的最佳方法。

现在，我有一个响应式图像，另一个图像绝对位于顶部并居中。当我尝试为第二张图像设置宽度时，它不再居中。

此外，当我调整窗口大小时，此居中元素会扩展到父对象之外。有没有办法保持它的约束？我是否全都错了，有没有更好的方法来实现这一目标？

我该怎么办？

谢谢

<div class="container">
<img class="background" src="https://via.placeholder.com/560x500/FFFF00/">
<div class="logo"><img src="https://via.placeholder.com/300x120"></div>
</div>

.container{
  position: relative;
}

.container .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container .background {
  width: 100%;
}

Answer 1

您可以使用flexbox居中。

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .logo {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* size of second image */
.container .logo>img {
  width: 100px;
}

.container .background {
  width: 100%;
}

<div class="container">
  <img class="background" src="https://via.placeholder.com/560x500/FFFF00/">
  <div class="logo"><img src="https://via.placeholder.com/300x120"></div>
</div>

Answer 2

这本身并不是一个不好的解决方案，但是如果满足以下条件，您将使自己更轻松：

您将使用background-image: src("url_here")而不是background元素（因此，请删除该DOM节点并将CSS附加到.container
使用margin: 0 auto;或margin: auto;（如果它是block元素并且具有宽度/高度），将第二个div居中居中

这应该可以避免您面临的某些问题，并且可以消除绝对定位和转换的全部需求。但是，使第二个图像变得比其所在的容器更大会成为一个问题（因为它不再位于父容器的约束之外）。

显然，这也可以使用Flexbox或任何其他布局方法来完成。但这是实现这一目标的最基本方法。

自适应图像居于另一个自适应图像上方

2 个答案: