I'm trying to make a mockup about carpets. I'm using JavaScript to calculate parameters. Here is my JavaScript code:
var mainImageHeight = $(".mockup-main-image").height();
var mainImageWidth = $(".mockup-main-image").width();
$(".mockup-carpet").css({
"width" : (210*mainImageHeight/513) + "px", /*Carpet Width*/
"height" : (400*mainImageWidth/910) + "px", /*Carpet Height*/
"left" : (412.61796875000005 * mainImageWidth / 910) + "px",
"top" : (265.07500000000005 * mainImageHeight / 513) + "px",
"transform" : "matrix3d(-0.06, "+(0.5 * mainImageHeight/513)+", 0.3, -0.0025, "+ (mainImageWidth/910*-2.55) +", 0, 1.1, 0, 1, 0, 2, 0, 0, 62, 0, "+(1.9*mainImageWidth/910)+")",
});
As you can see, I'm trying to calculate it according to mainImageWidth and mainImageHeight, because it should be responsive. The integer values are ratios.
Everything is fine, except of vertical Y position. I'm changing the third parameter from the end which is now 62. When the mainImageHeight is 513px, this parameter must be 62, but when the mainImageHeight is 720px, it must be 173 for the true mockup position. But I don't know how can I calculate it. I can not make it via direct ratio or inverse ratio.
Here is jsfiddle