Question

我有一个响应式容器，里面有一个图像。它运作良好。当窗口大小改变时，容器和图像正在调整大小。但是，我不仅需要一个，而且更多的图像彼此完全重叠（它们都具有相同的大小）。如何使用HTML和CSS实现这一目标？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

You could use grid in order to specify what row and column you want all images to sit in. They will then overlap and adjust to your container (do note the images I am using are all the same picture, but if you inspect, the 3 images are on-top of eachother:

.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>

Also note that grid isn't supported by all old browser

Answer 2

%c

.imageContainer {
  position:relative;
}

.imageContainer .img-1 {
  position:absolute;
  top:0;
  left:0;
}

.imageContainer .img-2 {
  float:left;
}

.clearfix {
  clear:both;
}

您需要将父级设置为position：relative;和图像（.child）到位置：绝对;

更新了图片，它们重叠。

再次使用您的代码更新。

更新＃3：你需要将一个图像设置为position：absolute和一个浮动并添加一个clearfix元素。

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

2 个答案: