javascript - 使用 CSS 在另一个图像之上调整图像

Question

我希望图像 B 像图像 A 一样流畅，同时将其置于图像 A 的中心位置。

这是我的示例代码:

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

CSS:

#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;
}

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

Answer 1

您需要以 % 而非像素为单位计算第二个图像的偏移量，并确保它们的大小是相对于容器 div 的。我用一个例子创建了一个 js fiddle :http://jsfiddle.net/BX6u7/

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

和CSS:

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