响应2张图片而不是另一张图片问题

Question

我对自适应图片有问题.... 看我的代码：

http://codepen.io/anon/pen/JozLmy

img, embed, object, video{ max-width: 100%; 
height: auto}


.wrap{
    margin: 0 auto;
    width: 1180px;
    max-width: 99%;
}


#anatomy{
    width: 100%;
    position: relative;
}


#anatomy div.mainbody{
    position: absolute;
    left: 0;
    top: 0
}

#anatomy div.brain{
    position: absolute;
    left: 200px;
    top: 43px
}
#anatomy div.heart{
    position: absolute;
    left: 725px;
    top: 320px;
}

当我调整浏览器窗口大小时，我希望所有三个图像一起调整大小而不更改第一个位置。

我指出我想要的图像No.2和3的位置保持在该位置，带有白线。

在更改浏览器大小之前

：

更改后

：

使用我在CodePen上编写的代码，只是粉红色图片调整大小，其他人没有调整大小和重新定位.... ：（

我该如何解决这个问题？

请帮助我......

Answer 1

您的图像正在远离白线，因为图像位于absolute。这意味着它们将从文档的语义流中删除，并且为positioned relative to it's closest ancestor。

当您调整屏幕大小时，他们不会移动的原因是您已使用固定单位指定了他们的位置，即px。如果您希望图像随显示器移动和调整大小，则需要使用灵活的单位，例如百分比，即%。

除此之外，尝试将HMTL元素放在静态图像的顶部会让你自己变得不必要。使用CSS可以实现该图像中的所有内容：Here's the Fiddle。

我建议您尝试JSfiddle，因为它有一个代码hilighter，可以显示您输入的无效属性，因为我在您的代码中找到了一些内容;）

Answer 2

通过添加overflow:hidden并将px单位更改为%并使用.brain设置每个.heart和bottom DIV，我的问题得以解决： 所以，

#anatomy{
    width: 100%;
    position: relative;
    overflow: hidden;
}


#anatomy div.mainbody{
    position: absolute;
    left: 0;
    top: 0
}

#anatomy div.brain{
    position: absolute;
    width: 19.915254%;
    left: 25%; 
    bottom: 94%;
}
#anatomy div.heart{
    position: absolute;
    width: 12.288136%;
    left: 72.881356%; 
    bottom: 57%;
}

解决了我的问题。