如何使用HTML + CSS + JS在图像上设置响应图像以显示固定？ [英] How to set responsively images on images to appear fixed using HTML+CSS+JS?

问题描述

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

I got a task where I have to rewrite an old Adobe Flex application in HTML, CSS, JavaScript.

这是一个客户应用程序来演示我们的产品几个图像（图像上的图像，所以假设我们有背景，房子和图形的png文件），图像会根据与用户的交互而改变。

It is an application for customers to demonstrate our product with several images (images on images, so let's say we have png files for background, house and stickfigures) and the images change based on interaction with the user.

我的例子让我们只有一个背景和两个图片。

For my example let's just have a background and two stickfigures.

背景应始终占据宽度的100％。当我们调整浏览器的大小时，stickfigures应始终保持在背景上的相同位置。

The background should always take 100% of the width. As we resize the browser the stickfigures should stay always at the same place on the background.

在我第一次尝试时

<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％;似乎没有用，所以我google了一下，增加了高度：512px;到我的容器类。在那之后'top'工作了，但是当我调整网页浏览器的大小时，stickfigures在后台移动。

Trying this way the top: xx%; doesn't seem to work, so I googled a bit and added height: 512px; to my container class. After that the 'top' worked, but as I resize the web browser the stickfigures move around on the background.

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

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

Any help, clue, idea is really appreciated, please ask if something is not clear.

推荐答案

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

I made some changes in your exemple :

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在图像上设置响应图像以显示固定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！