响应式 2 张图像超过另一张图像问题

Question

我对响应式图片有疑问...。看我的代码：

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

当我调整浏览器大小时 window，我想在不改变第一个位置的情况下一起调整所有三个图像的大小。

我点我要的位置，2号和3号留在那个位置，用白线。

更改浏览器大小之前：

更改后：

用我在CodePen上写的代码，只调整了粉色图片的大小，其他的没有调整大小和位置...。 :(

我该如何解决这个问题？

请帮帮我....

Answer 1

您的图片正在远离白线，因为图片的位置是 absolutely。这意味着它们已从文档的语义流中移除，并且是 positioned relative to it's closest ancestor。

当您调整屏幕大小时它们没有移动的原因是因为您已使用 固定单位 指定它们的位置，即 px。如果你想让你的图像随着显示器移动和调整大小，以真正的响应方式，你需要使用灵活的单位，比如 percentage 即 %.

除此之外，尝试将 HMTL 元素放置在静态图像的顶部会给您带来不必要的麻烦。该图像中的所有内容都可以通过 CSS: Here's the Fiddle 实现。

我建议尝试 JSfiddle，因为它有一个代码高亮显示，可以在您输入无效属性时显示，正如我在您的代码中发现的一些 ;)

Answer 2

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

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

解决了我的问题。

响应式 2 张图像超过另一张图像问题

Responsive 2 images over an other one image issues

css

media-queries

image-resizing