Html 在CSS中，如何相应地缩放多个重叠图像？

我在背景上叠加了多个图像，下面是一个示例：

<div style="position: relative; left: 0; top: 0;">
    <img src="images/background.png" style="position: relative; top: 0px; left: 0px;"/> 
    <img src="images/overlay1.png" style="position: absolute; top: 20px; left: 20px; "/>
    <img src="images/overlay2.png" style="position: absolute; top: 40px; left: 40px; "/>
</div>

如果浏览器处于全屏模式，则上述代码段有效。如果我减小浏览器大小，只有background.png会相应地缩放，但overlay1.png和overlay2.png在它们的位置上都保持相同的大小。我尝试将所有位置属性更改为

relative

，但覆盖图像出现在错误的位置

我将如何重构它以允许div标记中的所有图像相对于彼此适当地缩放？顺便说一句，我使用twitterbootstrap2.3.2作为默认的CSS主题

---

更多信息。所有图像的大小都是固定的，例如背景为640x480，显示在位置0、0处。覆盖图像也是固定大小的，需要进入与背景图像相关的特定位置。e、 g.一个叠加可能是64x64，并到达位置15、24（顶部、左侧），另一个可能是128x128，并进入位置200、231等。通过这些精确的位置叠加，背景+叠加成为完整的图片

为了在调整浏览器窗口大小时保持所有内容的比例，您应该对覆盖的大小和位置使用百分比值

在您的情况下，一切都是固定的，因此只需将像素转换为百分比，为此，您需要简单的公式：

% value = px value / container px value * 100

例如，对于叠加1大小：（64x64）位置：（24,15）：

现在只需将覆盖设置为绝对位置，并为每个属性应用正确的值：

.container {
    position:relative;
    width: 100%;
    max-width: 640px;
    line-height: 0;
}

.container img{
    max-width: 100%;
}

.overlay1{
    width: 10%;
    position: absolute;
    top: 3.125%;
    left:3.75%;
}

.overlay2{
    width: 20%;
    position: absolute;
    top: 41.666%;
    left: 36.09%;
}

---

查看

，这是因为

位置：绝对

，这看起来是必要的。不过还有一种选择-在

div

上使用多个背景图像，而不是在标记中。设置底部/右侧位置是一个选项吗？或者这些图像的大小未知？例如，使用背景图像：Chris，似乎背景图像变成前景图像，而其他图像则显示在其下方。我需要有第一个图像作为背景图像，并覆盖在第一个上面的休息。另外，第二张和第三张图片的大小似乎与第一张相同。cimmanon，我更新了这个问题。所有图像都是固定大小的，覆盖层需要进入特定位置。就像Photoshop中的分层一样。奇怪的是，你的演示可以在Chrome和Safari中使用，但不能在Firefox和IE10中使用。在Firefox和IE10中，背景保持不变而不缩小。@azgolfer你说得对，我更新了我的答案，似乎不是所有浏览器都支持内联块技巧

.container {
    position:relative;
    width: 100%;
    max-width: 640px;
    line-height: 0;
}

.container img{
    max-width: 100%;
}

.overlay1{
    width: 10%;
    position: absolute;
    top: 3.125%;
    left:3.75%;
}

.overlay2{
    width: 20%;
    position: absolute;
    top: 41.666%;
    left: 36.09%;
}