Можно ли измерить результирующее фоновое изображение при использовании background-size: cover с Javascript? - PullRequest
Новая
       15

Можно ли измерить результирующее фоновое изображение при использовании background-size: cover с Javascript?

1 голос
/ 12 августа 2011

Я хочу знать, возможно ли определить (новые) размеры фонового изображения после того, как оно было изменено с помощью 'background-size: cover' css3, используя Javascript.(Не работает) Пример: http://jsfiddle.net/daco/GygLJ/3/

Приветствия,

  • Daco

Ответы [ 2 ]

2 голосов
/ 12 августа 2011

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

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

например: 

    //jQuery
var imgSrc = $('#test').css('background-image');
//might need to do a bit of parsing on that, returns: url(http://blahblah)
alert(imgSrc);
imgSrc=imgSrc.replace('url("', '').replace('")', '');
alert(imgSrc);

var newImg = new Image();
newImg.onload=function()
{
    var h = newImg.height;
    var w = newImg.width;
    alert('w:'+w+' h:'+h);
};
newImg.src=imgSrc;

Надеюсь, это поможет

Пример здесь: http://jsfiddle.net/vap8p/

РЕДАКТИРОВАТЬ: обновленный источник и связанный с рабочим примером

0 голосов
/ 22 августа 2012

Предполагается, что background-image css для элемента с идентификатором 'mydiv'. Все родной JavaScript. Не будет взаимодействовать с другим JavaScript на странице. 

(function (id) {
    var img = new Image(), elm = document.getElementById(id);
    img.dataset.w = elm.offsetWidth;
    img.dataset.h = elm.offsetHeight;
    img.addEventListener('load', function () {
        var maxw = this.dataset.w,
            maxh = this.dataset.h,
            aspect = this.width / this.height;
        if(maxw > maxh * aspect) alert(maxw + ' x ' + maxw / aspect);
        else alert(maxh * aspect + ' x ' + maxh);
    }, false);
    img.src = window.getComputedStyle(elm).backgroundImage.slice(4, -1);
})('mydiv');​

Возможно, вы захотите округлить.

Для содержит вместо крышка , измените сравнение на противоположное. 

if(maxw < maxh * aspect) alert(maxw + ' x ' + maxw / aspect);
...