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 size：（64x64）position：（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

在CSS中，如何响应地缩放多个叠加图像？

1 个答案: