Получить вычисленное значение из фонового размера: обложка/содержать

Ответ 1

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

    var backgroundImage = new Image();
    backgroundImage.src = $('my_div_id').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");

    backgroundImage.onload = function() {
        var width = this.width;
        var height = this.height;

        var object = $('#my_div_id');

        /* Step 1 - Get the ratio of the div + the image */
        var imageRatio = width/height;
        var coverRatio = object.outerWidth()/object.outerHeight();

        /* Step 2 - Work out which ratio is greater */
        if (imageRatio >= coverRatio) {
            /* The Height is our constant */
            var coverHeight = object.outerHeight();
            var scale = (coverHeight / height);
            var coverWidth = width * scale;
        } else {
            /* The Width is our constant */
            var coverWidth = object.outerWidth();
            var scale = (coverWidth / width);
            var coverHeight = height * scale;
        }
        var cover = coverWidth + 'px ' + coverHeight + 'px';
        alert('scale: ' + scale + ', width: ' + coverWidth + ', height: ' + coverHeight + ', cover property: ' + cover);
    };

Подробное пошаговое руководство можно найти здесь http://www.gene.co.uk/get-computed-dimensions-background-image-background-size-cover/

Ответ 2

Свойство background-size указывает размер фонового изображения, а не его коэффициент масштабирования. Единственное, что вы можете получить от этого свойства, это его размер. Если бы такой фактор существовал, это было бы в другом свойстве (-y). Вы копаете не в том месте.

Отвечая на этот вопрос, я должен был задать себе еще один вопрос. Существует ли это число?

Предположим сначала, что это так, а значение - 2.135 (вдвое больше, чем оригинал). Что произойдет с этим номером, если я изменю cover на 100% 100%. В этом случае слово "коэффициент масштабирования по горизонтали" остается таким же, как cover, в то время как "вертикальный" коэффициент масштабирования изменился по-разному. Чего вы ожидаете от этого числа? Как это должно измениться?

Тот факт, что один из факторов может измениться, а другой не может заставить меня предположить, что они могут (и должны) быть отдельными значениями (кто знает, может быть, "-vendor-background-size-x-zoom-factor" и "-vendor-background-size-y-zoom-factor", оба из которых могут иметь положительные и отрицательные значения, и оба из них не включены в какие-либо css-спецификации, и оба они останутся под капотом браузера, если они в виде css-свойств, а не просто переменных или кто знает что).

В действительности это может быть немного сложнее, конечно))

Ответ 3

Это еще не ответ, но тесты, которые у меня есть...

У меня был небольшой тест с аналогичным свойством background-position, который также принимает ключевые слова, такие как center, left... (что подразумевает%), поскольку background-size делает для cover/contain

Пусть песочница с div с

var div = document.createElement('div');
div.style.cssText = "background-position:center 3%;";
document.body.appendChild(div);

теперь можно получить значение center с помощью:

window.getComputedStyle(div, null)
      .getPropertyCSSValue('background-position-x')
      .getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE);

и угадайте, что?

50

К сожалению,

var div = document.createElement('div');
div.style.cssText = "background-size:cover;";
document.body.appendChild(div);
window.getComputedStyle(div, null)
      .getPropertyCSSValue('background-size')
      .getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE);

вызывает ошибку:

InvalidAccessError: параметр или операция не поддерживались базовый объект.

Ответ 4

Вы можете использовать объект Image, чтобы получить размеры вашего файла фонового изображения, а затем сравнить его с размером элемента

var element = ...

var img = new Image()
img.onload = compare;
img.src = 'path/to/your/background-image'

function compare() {
  var fx = element.offsetWidth/img.width;
  var fy = element.offsetHeight/img.height;
  console.log(fx, fy);
}

Затем, в зависимости от значения свойства фона, вы можете получить точные масштабные коэффициенты

function compare() {
  var fx = element.offsetWidth/img.width;
  var fy = element.offsetHeight/img.height;

  var bs = window.getComputedStyle(element, null).backgroundSize;
  switch (bs) {
    case 'cover': console.log(Math.min(fx, fy)); break;
    case 'contain': console.log(Math.max(fx, fy)); break;
    case '100% 100%': console.log(fx, fy);
    default: console.log("Umm...");
  }
}

Случай по умолчанию более сложный. Поскольку каждая часть размера фона может быть представлена ​​в количестве единиц, код, правильно обрабатывающий эти единицы, будет немного спагеттивым и уродливым.

jQuery на основе fiddle

Ответ 5

Короткий ответ - браузеры не предоставляют способ получить вычисленное значение масштабного коэффициента фонового изображения, но вы можете вычислить его самостоятельно в соответствии с описанными правилами в спецификации.

Ответ 6

Вы можете проверить размер div и исходного изображения, выяснить, является ли ширина или высота div короче пропорционально, что означает, что изображение растянуто до 100% меньшей стороны. Например: Если контейнер div равен 600px X 500px, а размер изображения - 600px X 400px, размер изображения будет изменен, чтобы покрыть весь div, поэтому он будет изменен до Auto X 500px, что означает, что масштаб изображения будет 500/400 = 1,25

Ответ 7

Невозможно сделать это, так как потребуется, чтобы изображение загружалось, чтобы дать вам точное значение. Даже если это значение было выставлено, вам нужно будет дождаться события window.load, прежде чем вы сможете его восстановить... в этот момент быстрее вычислять значение самостоятельно.

ОБНОВЛЕНИЕ: Из спецификация CSS размер фона ведет себя по-разному в разных условиях - независимо от того, имеет ли изображение внутреннее измерение/соотношение (jpeg/svg) или нет (css-градиент), установлены ли оба значения в "auto" (в этом случае они рассматриваются как "содержат" ), установлено ли одно из значений "background-repeat" равным "round", есть ли несколько фонов... вы понимаете.

Кроме того, размер фона требует макета (изменяется с помощью макета), но не находится в списке свойств которые вычисляются после макета на фактическое "использованное" значение. Это важно, потому что getComputedStyle возвращает фактическое "использованное" значение, но "background-size" не проходит процесс вычисленного значения → используемое значение.

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

Ответ 8

проверьте этот код:

body{background: url('images/bg.jpg') no-repeat fixed; display: block;height: auto;max-width: 100%;}
body{background-size:cover}

Примечание: background-size:cover определяется отдельно

Ответ 9

попробовать:

background-size: contain

Это позволит увеличить/уменьшить масштаб и установить размер фона в зависимости от соотношения пикселей устройства. Никакие javascript или любые вычисления, требуемые здесь в качестве браузера, не выполнят остальные задачи.