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

#javascript #css #css-transforms

#javascript #css #css-преобразования

Вопрос:

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

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

Я знаю, что я также могу добавить ширину, удалив десятичные дроби как 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   ")"
    });
}

1. Не могли бы вы предоставить нам jsFiddle, чтобы глубже взглянуть на вашу проблему?

2. @AntoineGautrain уверен. Вам буквально нужно сделать окно просмотра действительно маленьким, чтобы вы могли видеть, как пиксели разбиваются. Поиграйте с высотой окна результатов. Синяя линия на втором слайде очень очевидна. jsfiddle.net/sadikyalcin/t0a31mpf/18

Ответ №1:

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

1. Я действительно могу, но это не на 100% точно. Я пытаюсь уместить ползунок на 100% по высоте или ширине. Если я урежу десятичные дроби, я могу получить нечетный пиксель или два.

Ответ №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;