如何让 2 个图像在 div 中居中

Question

我有一个要填充浏览器窗口宽度的 div。

在 div 中，我想要 2 张图像，它们彼此重叠，并且每个图像都在 div 中居中。图像可以是任何大小。两个图像都需要保持它们的纵横比，我不希望它们中的任何一个作为 div 的背景。

  .parent {
    position: relative;
    border: 1px solid blue;
    width: 100%;
  }
  .child {
    border: 1px solid red;
    margin-left: auto;
      margin-right: auto;
      display: block;
    max-width: 100%;
  }
  .ontop{
    z-index:1;
  }

  <div class="parent">
    <img class='child ontop' src="https://i.postimg.cc/yNh7V4v1/spaceship.png">
    <img class='child' src="https://i.postimg.cc/mgB04zzn/universe.jpg">
  </div>

fiddle

这里的问题是它们不在彼此之上。我可以让它们彼此重叠，并且至少水平居中

  .parent {
    position: relative;
    border: 1px solid blue;
    width: 100%;
  }
  .child {
    position: absolute;
    border: 1px solid red;
    margin-left: auto;
      margin-right: auto;
      display: block;
    max-width: 100%;
    left: 50%;
    transform: translate(-50%);
  }
  .ontop{
    z-index:1;
  }

  <div class="parent">
    <img class='child ontop' src="https://i.postimg.cc/yNh7V4v1/spaceship.png">
    <img class='child' src="https://i.postimg.cc/mgB04zzn/universe.jpg">
  </div>

fiddle

但现在的问题是由于我使用了绝对定位，图像不再包含在 div 中。

谁能告诉我这是什么技术？

Answer 1

我建议您将图像（空格）移动到 CSS 背景图像。当您想将图像作为背景时，这是正确的方法。

将 flex 应用于父级，一切顺利。

.parent {
 background-image: url(https://i.postimg.cc/mgB04zzn/universe.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.child{
      height: 100px;
    width: 100px;
}

 <div class="parent">
  <img class='child' src="https://i.postimg.cc/yNh7V4v1/spaceship.png">
 </div>

Answer 2

使用position:absolute; 将宇宙飞船放置在父级的中间中心。这要求父级与图像的宽度相同。我在示例中使用width: fit-content;

使用此方法，您可以通过将这三个 HTML 元素放入一个容器中来移动图像集。

.parent {
  width: fit-content;
  border: 1px solid blue;
  position: relative;
}

.parent img {
  border: 1px solid red;
}

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

<div class="parent">
  <img class="center" src="https://i.postimg.cc/yNh7V4v1/spaceship.png">
  <img src="https://i.postimg.cc/mgB04zzn/universe.jpg">
</div>

想要更大的背景图片，只需更改其大小？在此示例中，我将其宽度设置为 width: 100vw; 100 视图宽度

（我为这个例子设置了一个内联样式，尽管你可能应该为你想要的大小制定一个 CSS 规则）

.parent {
  width: fit-content;
  border: 1px solid blue;
  position: relative;
}

.parent img {
  border: 1px solid red;
}

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

<div class="parent">
  <img class="center" src="https://i.postimg.cc/yNh7V4v1/spaceship.png">
  <img style="width:100vw;" src="https://i.postimg.cc/mgB04zzn/universe.jpg">
</div>