Question

我有一个非常简单的网页，我正在尝试构建。它有一个img标签，包括一个SVG图像文件，可以缩放到页面宽度的100％。我还有一组DIV，我想相对于图像“固定”到位。

我开始使用ems的绝对定位，但很快意识到如果我希望div相对于缩放背景保持原位，我必须移动到百分比。

然后我意识到问题是因为我的SVG由于页面宽度的变化而缩放，所以我无法设置好的高度百分比，因为当窗口的宽度因窗口的宽度而变化时，高度可能受影响也可能不受影响SVG的宽高比。

有关方法的任何建议吗？我觉得我在这里缺少一些基本的东西。

以下是我的页面示例：

<html>
<head>
<style>
    .box{
        width: 4.0em;
        height:3.0em;
        background-color: yellow;
        position: absolute;
    }
    #a{ left:6.4%; top:16.0%; }
    #b{ left:6.4%; top:23.0%; }
    /* This doesn't work. The DIVs aren't fixed relative to bg.svg. */
</style>
<body>
    <img src="bg.svg" width="100%" />
    <div class="box" id="a"></div>
    <div class="box" id="b"></div>
</body>

Answer 1

为.box和img设置一个相同的顶部和左侧位置，这样div和image都有相同的“锚点”，你可以相对于那个锚点定位div。

img {
   position: absolute;
    top: 0px;
    left: 0px;
}
.box{
    width: 4.0em;
    height:3.0em;
    background-color: yellow;
    position: absolute;
    top: 0;
    left: 0;
}
#a{ left:20px; top:20px; }
#b{ left:20px; top:20px; }

在此处查看：http://jsfiddle.net/SebastianPataneMasuelli/hP6Dg/1/

如何根据SVG背景修复DIV？

1 个答案: