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小提琴：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;
}

Answer 2

您不应使用硬编码的px单位，而应使用%。

将margin,width and height属性替换为相应的%值。 '％'根据您的图片尺寸和您的要求确定。

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

2 个答案: