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

Question

我接到一个任务，我必须在 HTML、CSS、JavaScript.

中重写旧的 Adobe 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>

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

<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

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

How to set responsively images on images to appear fixed using HTML+CSS+JS?

html

css

image

responsive-design

resize