Javascript 使用CSS在另一个图像上调整图像

我希望图像B像图像A一样流动，同时保持图像A的中心位置

以下是我的示例代码：

<div class="container">
 <img id="imgA" src="A.png" /> 
 <img id="imgB" src="B.png" />
</div>

---

使用上面的代码，我只能在分辨率足够高的情况下使图像B成为图像A的中心，但当分辨率降低时，图像A将调整到其屏幕，但图像B保持不变。要使图像B成为流体并以任何分辨率成为图像A的中心，我需要添加什么？

您需要以%为单位计算第二个图像的偏移量，而不是以像素为单位，并确保它们的大小相对于容器div。我创建了一个js fiddle，其中有一个示例：

---

您不应该使用硬编码的

px

单位，而是使用

%

用相应的

%

值替换

边距、宽度和高度属性。“%”根据您的图像尺寸和要求确定

#imgA{
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}




#imgB{
    position: absolute; 
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -100px;
    width: 400px;
    height: 200px;
}

<div class="container">
 <img id="imgA" src="http://placehold.it/350x150" /> 
 <img id="imgB" src="http://placehold.it/150x50" />
</div>

.container {
  margin: 0 auto;
  position:relative;
  width: 50%;
  background-color:yellow;
}

#imgA{
    display: block;
    width:100%;
    max-width:100%;
    height:auto;
    border:none;
}

#imgB{
    top: 28.6%;
    left: 21.6%;
    width: 57%;
    max-width: 57%;
    border:1px solid white;    
    position: absolute;
}