Going back to our HTML, we see that even though we scaled the image up so that it would be perceived at the same size, the element has a certain offset from the top. Let’s try correct this by solving for the top gap
x" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">x:
- h" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">h is the height of the element in the background (EF" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">EF)
- s" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">s is the scale applied. So, s.h=E2F2" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">s.h=E2F2
- v2" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">v2 is half the height of the viewport
- e" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">e is the vertical distance from the perspective origin to the element center, and e1" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">e1 its projection on the viewport
- 1+zp-z" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">1+zp−z is the factor any height at z" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">z distance is multiplied with to result in the projected height.
- Using the constraint that on the viewport projection: x+E2’O’+e1" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">x+E2’O’+e1 is half of the viewport:
- x+s2⋅h⋅(1+zp-z)+e⋅(1+zp-z)=v2" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">x+s2⋅h⋅(1+zp−z)+e⋅(1+zp−z)=v2
- x=h2⋅(1-s)+h⋅z⋅1-s2⋅(p-z)–v⋅z2⋅(p-z)" role="presentation" style="box-sizing: border-box; display: inline; line-height: normal; text-indent: 0px; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;">