Question

我有两张图片需要相互重叠。图像也必须具有响应性，因此具有百分比宽度和高度。

<div class="container">
    <img src="res/bigger.png/>
    <img src="res/smaller.png class="icon"/>
</div>

.container {
  width:100%;
  height:100%;
  background-color:blue;
  postion:relative;
}
.container img {
   max-width:100%;
   max-heihgt: 100%;
   height: auto;
   width: auto;
}
.icon {
   position: relative;
   top: -70%;
   left: 20%;
   z-index: 50;
   width: 10% !important;
   height: auto !important;
}

由于两个图像在重新调整大小时没有相同的比例，因此较大图像顶部的较小图像将失去相对于较大图像的位置。当我重新调整页面大小时，如何保持较小图像相对于较大图像的位置？
可以在此处找到此问题的一个示例http://jsfiddle.net/5YQFV/

Answer 1

如何使用像这样的容器替换最大的图像而不是使用两个图像

<div class="the-gang">
  <img src="res/smaller.png" />
</div>

然后将容器的位置设置为position:relative，但将较小图像的位置设置为position:absolute，如下所示

.the-gang{
  position:relative;
  width:100px;
  height:75px;
}

.the-gang img{
  position:absolute;
  top:10px;
  left:10px;
}

这样，最小的图像将始终保持放置的位置，因为绝对位置将相对于它的容器。可能的缺点是你必须设置父容器的最小高度和宽度，但优点是它将完全用CSS完成，不需要使用javascript。

CSS响应叠加图像

1 个答案: