1

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

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

4

1 回答 1

0

怎么样，不是使用两个图像，而是用这样的容器替换最大的图像

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

于 2013-01-09T10:22:22.973 回答