CODEWITHSUNDEEP
javascriptcssimageresponsive-designscaling
Flotaz
Flotaz

Reputation: 13

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>

Upvotes: 0

Views: 151

Answers (2)

metatron
metatron

Reputation: 999

Dimensions and positions in percentages relate to the dimensions of the parent element. In your case the window of the submarine should be positioned as a percentage of the submarines dimensions. What you should do to make this is work is to put the window as a child in the submarine. Easiest would be to work with divs with background-images and use background-size: 100% to make the background-images scale with the elements.

Also you could use the "padding-bottom trick" to set the "height" of the div to a percentage of the parent's width.

#submarine {
  background: yellow;
  width: 30%;
  padding-bottom: 20%;
  position: absolute;
  left: 20%;
  top: 20%;
 }
 
 #window{
   position: absolute;
   background: red;
   width: 20%;
   padding-bottom: 20%;
   right: 5%;
   top: 40%;
   background: red;
 }
<div id="submarine">
  <div id="window"></div>
</div>

Upvotes: 0

Manu Sampablo
Manu Sampablo

Reputation: 350

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.

Upvotes: 1

Related Questions