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

如果浏览器处于全屏模式，则以上代码段有效。如果我减小浏览器大小，只有 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