html - 响应式容器中重叠的多个图像

Question

我有一个响应式容器和一个图像。它运作良好。当窗口大小更改时，容器和图像正在调整大小。但是，我不仅需要一张，还需要更多图片，它们完全重叠(所有图片都具有相同的大小)。如何使用 HTML 和 CSS 实现这一点？

.pageCenter {
  display: block;
  max-width: 980px;
  margin: 0 auto;
  width: auto;
  float: none;
  border: 5px solid red;
}

.imageContainer img {
  display: block;
  margin: 0 auto;
  width: auto;
}

img {
  position: relative;
}

<div class="pageCenter">
  <div class="imageContainer">
    <img src="https://placeimg.com/400/200/nature" style="width:100%;" />
  </div>
</div>

Answer 1

您可以使用 grid 来指定您希望所有图像位于的行和列。然后它们将重叠并调整到您的容器(请注意，我使用的图片都是同一张图片，但如果您检查一下，这 3 张图片是彼此重叠的:

.pageCenter {
  display: block;
  max-width: 980px;
  margin: 0 auto;
  width: auto;
  float: none;
  border: 5px solid red;
}

.imageContainer{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  margin: 0 auto;
  width: auto;
}

img {
  position: relative;
  grid-row: 1;
  grid-column: 1;
}

<div class="pageCenter">
  <div class="imageContainer">
    <img src="http://www.fillmurray.com/800/400" style="width:100%;" />
    <img src="http://www.fillmurray.com/800/400" style="width:100%;" />
    <img src="http://www.fillmurray.com/800/400" style="width:100%;" />
  </div>
</div>

另请注意，grid 并非所有 old browser 都支持