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

问题

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

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.

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.

At my first try

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

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.

回答1:

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%;
}

Please see the demo : JSFiddle

来源：https://stackoverflow.com/questions/29233558/how-to-set-responsively-images-on-images-to-appear-fixed-using-htmlcssjs

标签

html

css

image

responsive-design

resize