⏮◀▶⏭ ◎ Generic page type

Generic page type

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

$h$ is the height of the element in the background ( $E F$ )
$s$ is the scale applied. So, $s . h = E_{2} F_{2}$
$\frac{v}{2}$ is half the height of the viewport
$e$ is the vertical distance from the perspective origin to the element center, and $e_{1}$ its projection on the viewport
$1 + \frac{z}{p - z}$ is the factor any height at $z$ distance is multiplied with to result in the projected height.
Using the constraint that on the viewport projection: $x + E_{2} ’ O ’ + e_{1}$ is half of the viewport:
$x + \frac{s}{2} \cdot h \cdot (1 + \frac{z}{p - z}) + e \cdot (1 + \frac{z}{p - z}) = \frac{v}{2}$
$x = h 2 \cdot (1 - s) + h \cdot z \cdot 1 - s 2 \cdot (p - z) - v \cdot z 2 \cdot (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;">$

fitTextInBox('theBox'); Generic page type fitTextInBox('theBox');

Generic page type