使用变换比例时防止像素小数

Question

我有一个滑块，它由 1366px x 768px 的 iframe 组成，我缩放以适应 window 调整大小。但是，当 1366 被除时，我可以随机得到元素实际宽度的小数，这导致我称之为 'pixel breaking'.

注意第二张图片上的白线。这实际上是第二张幻灯片，这是我的问题。例子; 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) 将数字的小数部分 trim 去掉。

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;

使用变换比例时防止像素小数

Prevent pixel decimals when using transform scale

javascript

css

css-transforms