调整窗口大小时图像的位置改变

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>

当我调整浏览器窗口的大小时，图像的位置会改变。我希望它贴在顶部的粉红色div上，并在调整窗口大小时随之移动。我也尝试过分配相对于pink div和mini div的位置，以及将绝对位置分配给img，没有任何效果。 所以，这就是我所拥有的（另请参见附件图片）：

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

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

在注释部分中运行代码段并调整窗口大小时：

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