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

看看演示小提琴