如何在图像上设置响应式图像以使用 HTML+CSS+JS 固定显示？

Question

我有一个任务，我必须用 HTML、CSS、JavaScript 重写旧的 Adob​​e Flex 应用程序。

这是一个应用程序，供客户使用多张图像（图像上的图像，假设我们有背景、房屋和人物人物的 png 文件）来展示我们的产品，并且图像会根据与用户的交互而变化。

在我的示例中，我们只需要一个背景和两个简笔画。

背景应始终占宽度的 100%。当我们调整浏览器的大小时，简笔画应该始终保持在背景的同一位置。

第一次尝试

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

尝试这种方式 top: xx%;似乎不起作用，所以我搜索了一下并添加了 height: 512px;到我的容器类。之后，“顶部”工作了，但是当我调整网络浏览器的大小时，人物会在背景上移动。

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

非常感谢任何帮助，线索，想法，如果有不清楚的地方，请询问。

Answer 1

我在你的例子中做了一些改变：

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