Я пытаюсь сделать макет о коврах. Я использую JavaScript для расчета параметров. Вот мой код JavaScript:
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)+")",
});
Как видите, я пытаюсь рассчитать его в соответствии с mainImageWidth
и mainImageHeight
, потому что он должен быть отзывчивым. Целочисленные значения являются отношениями.
Все хорошо, кроме вертикальной позиции Y. Я изменяю третий параметр с конца, который теперь равен 62. Когда mainImageHeight равен 513px, этот параметр должен быть 62, но когда mainImageHeight равен 720px, он должен быть 173 для истинной позиции макета. Но я не знаю, как я могу рассчитать это. Я не могу сделать это с помощью прямого или обратного отношения.
Вот jsfiddle