javascript - 如何在 CSS 中修复一个图像与另一个图像的比较？

Question

http://tree-leaves.comuf.com/

在这个网站中，尽管调整了窗口大小，我还是想将叶子的位置固定在树的 Twig 上。

为此，我在 CSS 定位中使用了百分比，但是当我调整窗口大小时，我可以看到树叶与 Twig 没有完全对齐。

当我们调整窗口大小时，我知道树和叶子的尺寸会改变，我怎样才能更精确地定位叶子？

HTML 代码:

<pre>
    <div id="leaves">
        <img src="images/leaf1.svg" id="l_1">
        <img src="images/leaf1.svg" id="l_2">
        <img src="images/leaf1.svg" id="l_3">
    </div>
    <div id="content">
        <img src="images/tree.svg" id="tree">
    </div>
</pre>

CSS 代码:

#content {
    float: left;
    width: 100%;
    text-align: center;
    background: linear-gradient(to bottom, transparent 0%,transparent 85%,#893700 85%,#893700 100%);
}

#tree {
    width: 80%;
    left: 10%;
    z-index: 10;
}

#leaves {
    background-color: red;
}
#leaves img {
    width: 5%;
}

#l_1 {
    margin: 0;
    margin-bottom: -4%;
    margin-left:5.7%;
    transform: rotate(-35deg);
}

#l_2 {
    margin: 0;
    margin-bottom: 0%;
    margin-left: 12.9%;
}

#l_3 {
    margin: 0;
    margin-bottom: -4%;
    margin-left: 7%;
    transform: rotate(-5deg);
}

Answer 1

您可以尝试使用视口(viewport)单位，例如 vw。我玩过似乎效果很好，即左边的第一片叶子:

#f_1 {
  margin-bottom: -4vw;
  margin-left: 5.7vw;
  transform: rotate(-35deg);
}

您可以只使用浏览器 Web Inspector/Developer Tools 来调整每个叶子的值，并在您对它们都满意时保存它。显然，您也可以在 Twig 上进行。

http://caniuse.com/#feat=viewport-units