图像位置在调整 window 大小时发生变化

Question

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

当我调整浏览器大小时，图像的位置发生变化 window。我希望它粘在顶部的粉红色 div 上，并在我调整 window 大小时随它一起移动。我还尝试分配相对于粉红色 div 和迷你 div 的位置，并将绝对位置分配给 img，但没有任何效果。所以，这就是我所拥有的（另见附图）：

https://i.stack.imgur.com/m3w6n.png

https://i.stack.imgur.com/hvwwg.png

关于运行评论部分中的代码片段并调整大小 window:

https://i.stack.imgur.com/8jgIy.png

Answer 1

这是代码。请检查一下。希望它能帮助你。如果有任何变化，请告诉我。

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

Answer 2

试试这个：

.p1 
{
  width: 100%
}

图像位置在调整 window 大小时发生变化

Position of image changes on resizing the window

html

css

layout

styling

window-resize