CSS 响应式叠加图像

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。