CODEWITHSUNDEEP
javascripthtmlcsscss-position
mkfahmi
mkfahmi

Reputation: 83

How to fix an image compared with another one in CSS?

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

In this website, I want to fix the leaves position just over the branchs of the tree in spite of resizing the window.

For this, I used percentage in the CSS positioning, but when I resize the window, I can see that the leaves aren't perfectly aligned with the branchs.

How can I do to position the leaves with more precision, knowing that the tree and the leaves change their dimensions when we resize the window ?

HTML code :

<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 code :

#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);
}

Upvotes: 0

Views: 63

Answers (1)

Stickers
Stickers

Reputation: 78756

What you can try is using viewport units, such as vw. I have played around seems working good, i.e. for first leaf on the left:

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

You can just use browser Web Inspector/Developer Tools to adjust the values for each leaf, and save it when you're happy with them all. Obviously, you can also do it on the branches too.

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

Upvotes: 1

Related Questions