使用变换比例时，请避免像素小数点

Question

我有一个滑块，该滑块由1366px x 768px的iframe组成，我可以对其进行缩放以适合窗口调整大小。但是，当除以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;