Предотвращение десятичных разрядов при использовании масштаба преобразования

Question

У меня есть ползунок, который состоит из фреймов размером 1366px x 768px, которые я масштабирую, чтобы подогнать под размер окна. Однако, когда разделено 1366, я могу произвольно получить десятичные дроби на фактической ширине элемента, что вызывает то, что я называю «разрывом пикселей».

Обратите внимание на линию while на втором изображении. На самом деле это второй слайд, который является моей проблемой. Пример; 1366px становится 1045.234234px, поэтому они не выстраиваются должным образом.

Я знаю, что я также могу добавить ширину, удалив десятичные дроби как parseInt(scaleAmount * 1366), но я не думаю, что это всегда может быть точным при разных разрешениях.

Что-нибудь, что я могу попытаться решить или минимизировать это?

var $el = $(element);
var elHeight = 768;
var elWidth = 1366;
var $wrapper = $(parent);

function doResize(event, ui) {
    var scale, origin;

    scale = Math.min(
        ui.size.width / elWidth,
        ui.size.height / elHeight
    );

    $el.css({
        'transform': "scale(" + scale + ")",
        '-webkit-transform': "scale(" + scale + ")"
    });
}

Answer 1

Поскольку вы конвертируете в строку, вы можете просто обрезать десятичную часть числа, используя scale.toFixed(0).

Answer 2

ОК, я думаю, что решил это. Я преобразовываю масштаб преобразования в значение в пикселях. Округлить пиксель. И, наконец, преобразуйте округленный пиксель обратно в масштаб преобразования. Таким образом, масштабированный пиксель всегда будет четным числом, поэтому пиксели больше не будут ломаться.

scale = Math.min(
    ui.size.width / elWidth,
    ui.size.height / elHeight
);

var scaleInPixels = scale * elWidth;
var evenPixel = 2 * Math.round(scaleInPixels / 2);
var finalScale = evenPixel / elWidth;