以另一个响应图像为中心的响应图像

Question

我只是想不出让一张响应式图片位于另一张响应式图片中心的最佳方式。

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

另外，当我调整 window 的大小时，这个居中的元素会扩展到父元素之外。有没有办法控制它？我是不是全错了，还有更好的方法吗？

我能做什么？

谢谢

<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; 将第二个 div 居中（如果它是 block 元素并且具有 width/height）

这应该可以防止您面临的一些问题，并且可以消除对绝对定位和转换的全部需求。然而，让第二个图像变得比它所在的容器更大会成为一个问题（因为它不再超出父级的约束）。

这显然也可以通过 Flexbox 或任何其他布局方法来完成。但这是最基本的实现方式。

以另一个响应图像为中心的响应图像

responsive image centered on top of another responsive image

html

css

responsive