0

Ok, first a little explanation of concept and rules:

Let's say we have a container and an image. Now if we define a percentage, the percentage of the image is aligned to the percentage of the container.

So let's only consider width: If we say the percentage is 25%, then 25% width point of the container will be aligned to the 25% width point of the image.

See illustration below: enter image description here

The yellow is image and the black is container. I hope the concept makes sense to you.

Now let's say we know the width of container is 100px, and the width of image is 400px. I want to calculate a percentage such that, when applied with the rule above, the center of the image will always be aligned to the 130% width point of the container (so in this case, is the 130px width point.) Something like this: enter image description here

The reason I use 130% is because the size is dynamically determined, so there is no known size, but I do know that the image will always be in proportion to the container, and what the proportion will be.

So, the problem is I want to align 50% of image to 130% of container, but the rule states you can only align 50% to 50%, 60% to 60%, and such. So i need to find a percentage that is the same for both image and container and would result in the picture above.

What would be the formula I could use?

BigName
  • 123

1 Answers1

1

$I=$absolute width of the image $C=$absolute width of container

We center the origin of the coordinate system at the left edge of the container (positive direction to the right), and denote the position of the left edge of the image as $x$.

If we follow the rule and $p$ is the $p$ is the percentage, then

$$x=p\cdot C-p\cdot I$$

Let now $p_C$ be the percentage of the container and $p_I$ the percentage of the image. In your case $p_C = 130\% = 1.3$ and $p_I = 50\% =0.5$

Now we have $$x = C\cdot p_C - I\cdot p_I.$$

Now we can equate the formula above with this one and get:

$$pC-pI = x = C\cdot p_C - I\cdot p_I.$$ We can now solve this for $p$ and get

$$p = \frac{C\cdot p_c - I\cdot p_i}{C-I}.$$

In your case this is $$p = \frac{1.3 \cdot C-0.5 \cdot I}{C-I}$$

flawr
  • 16,533
  • 5
  • 41
  • 66