html - 如何使用HTML + CSS + JS将图像上的响应图像设置为固定显示？

我要做的任务是必须用HTML，CSS，JavaScript重写旧的Adobe Flex应用程序。

这是一个用于向客户展示我们的产品的应用程序，其中包含多个图像（图像上的图像，所以我们有用于背景，房屋和贴纸的png文件），并且图像会根据与用户的互动进行更改。

在我的示例中，我们仅具有一个背景和两个stickfigures。

背景应始终占据宽度的100％。当我们调整浏览器的大小时，stickfigures应该始终位于背景的同一位置。

第一次尝试

<style>
.container { position: relative; width: 100%; }
.my-background {    position: absolute; left: 0; top: 0; width: 100%;}
.stickfigures { position: absolute; z-index: 10; }
.jane { left: 35%; top:25%; width: 40%; }
.james { left: 55%; top:55%; width: 15%; }
</style>
<div class="container">
  <img src="background.png" class="my-background">
  <img src="stickfig1.png" class="stickfigures jane">
  <img src="stickfig2.png" class="stickfigures james">
</div>

这样尝试顶部：xx％；似乎不起作用，所以我用谷歌搜索了一下并增加了高度：512px；到我的容器类。之后，“顶部”起作用了，但是当我调整Web浏览器的大小时，stickfigures在背景中移动。

<style>
.container { position: relative; width: 100%; height: 512px,}
.my-background {    position: absolute; left: 0; top: 0; width: 100%;}
.stickfigures { position: absolute; z-index: 10; }
.jane { left: 35%; top:25%; width: 40%; }
.james { left: 55%; top:55%; width: 15%; }
</style>
<div class="container">
  <img src="background.png" class="my-background">
  <img src="stickfig1.png" class="stickfigures jane">
  <img src="stickfig2.png" class="stickfigures james">
</div>

任何帮助，线索，想法都非常感谢，请询问是否不清楚。

最佳答案

我对您的示例进行了一些更改：

的HTML

<div class="container">
  <img src="background.png" class="my-background">
  <img src="stickfig1.png" class="stickfigures jane">
  <img src="stickfig2.png" class="stickfigures james">
</div>

的CSS

.container {
    position: relative;
    width: 100%;
    height: auto;
}
.my-background {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height:auto
}
.stickfigures {
    position: absolute;
    z-index: 10;
}
.jane {
    left: 5%;
    top:20%;
    width: 20%;
}
.james {
    left: 60%;
    top:50%;
    width: 15%;
}

请查看演示：JSFiddle