CODEWITHSUNDEEP
htmlcsslayoutstylingwindow-resize
Dhvani Khakhar
Dhvani Khakhar

Reputation: 35

Position of image changes on resizing the window

.pinkDiv {
       position: relative;
       width: 100%;
       height: 40vh;;
       background-color: pink;
    }

    .miniDiv {
       position:relative;
    }

    .p1 {
       position:absolute;
    }
<div class="pinkDiv">
     <div class ="miniDiv">
      <img src="https://dummyimage.com/200x150/ff00ff/fff.png" class = "p1" style="background-color:green;">
     </div>
    </div>

The position of the image changes, when I resize the browser window. I want it to stick to the pink div on top and move with it as I resize the window. I also tried assigning position relative to pink div and mini div and position absolute to img, nothing works. So, this is what I have (also see attached pictures):

https://i.sstatic.net/m3w6n.png

https://i.sstatic.net/hvwwg.png

On running the code snippet in the comment section and resizing the window:

https://i.sstatic.net/8jgIy.png

Upvotes: 1

Views: 1814

Answers (2)

Sukhveer Singh
Sukhveer Singh

Reputation: 3077

Try this:

.p1 
{
  width: 100%
}

Upvotes: 0

Revti Shah
Revti Shah

Reputation: 642

Here is the code. Please check it. Hope it will help you. If any changes then please let me know.

.pinkDiv {
  position: relative;
  width: 100%;
  height:100px;
  background-color: pink;
}

.miniDiv {
  width:100px;
}

img{
  width: 100%;
  height: auto;
}
<div class="pinkDiv">
  <div class="miniDiv">
    <img src="https://dummyimage.com/200x150/ff00ff/fff.png" class="p1" style="background-color:green;">
  </div>
</div>

Upvotes: 1

Related Questions