在 CSS 中，如何响应地缩放多个覆盖的图像？

Question

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

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

如果浏览器处于全屏模式，上面的 sn-p 可以工作。如果我减小浏览器的大小，只有 background.png 会相应地缩放，但是 overlay1.png 和 overlay2.png 都保持相同的大小固定在它们的位置。我尝试将所有位置属性更改为relative，但叠加图像出现在错误的位置。

我将如何重构它以允许 div 标签中的所有图像相对于彼此正确缩放？顺便说一句，我使用 Twitter Bootstrap 2.3.2 作为默认 CSS 主题。

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

Answer 1

为了在调整浏览器窗口大小时保持所有内容按比例缩放，您应该对叠加层的大小和位置使用百分比值。

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

% value = px value / container px value * 100

例如，对于 Overlay 1，尺寸：(64x64) 位置：(24,15)：

width = 64/640*100 = 10%
top = 15/480*100 = 3.125%
left = 24/640*100 = 3.75%

现在只需将叠加层设置为绝对位置并为每个属性应用正确的值：

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

查看Demo fiddle