Search code examples
javascriptcssimageresponsive-designscaling

Two images on each other with responsive behavior and proportional scaling

enter image description hereI would like to do something pretty standard in HTML/CSS/javascript I think but somehow I didn't find any solution for now: I want to have multiple images on each other with some of them being clickable. For example: submarine with red circle button as window in this case the submarine is one img and the red circle is an input type="image" working as a button.

I want those multiple images to behave "as one" in term of responsivness and scaling so that I still see the same overall image independantly of the size of my window.

If I use this trick here: How do I position one image on top of another in HTML? and make both images responsive then the circle is not scaling down simultanuously with the submarine. Moreover, since the red circle is positioned in an absolute way it is not staying at the same place relative to the submarine.

here is my current code:

    .div{
    position: relative;
    }

    .responsive {
      max-width: 100%;
    }
    
    #test2 {
    width: 12.3%;    
    position:absolute;
    z-index: 2;
    left: 73%;
    top: 62%;
    }
    
    #test
    {
      width: 100%;    
      position:relative;
      z-index: 1;
    }
<div>
      <img src="/submarine.png" id="test" class="responsive" />
      <input type="image" src="/red_circle.png"  id="test2" class="responsive" />
</div>

Solution

  • In order to achive that, you can work with percentages, so if you reduce the scale of the window the size of the images reduce as well.

    CSS:

    .submarine {
  width: 30%;
  height: 55%;
  position: relative;
}

.redDot {
  width: 2%;
  position: absolute;
}

    HTML:

    <div>
  <img src="submarine.jpg" clas="submarine">
  <img src="redDot.png" class="redDot">
</div>

    Then play with the margins in orther to position the red dot in the submarine.