получить размер фонового изображения, установленного для покрытия

Добрый день всем. У меня есть div с фоновым изображением, размер которого равен cover.

как мне получить размер фона с помощью javascript или jquery?

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

<style>
body {width:100%; height:100%}
#fullCoverBg {background-image:url("ani_bg.jpg"); background-repeat:no-repeat; background-size:cover; background-position:right;}  

@media all and (max-width : 1000px) {
/* small screens */
aside {height:30%; width:100%;}
#fullCoverBg {height:70%; width:100%;}
}

@media all and (min-width : 1001px) {
/* big screens */
aside {height:100%; width:30%;float:left;}
#fullCoverBg {height:100%;width:70%;float:left;}
}  
</style>    

<body>
<aside>this div stay on head on small devices, and go on the left side on big screens </aside>
<div id="fullCoverBg"></div>
</body>

скажем, мы изменим размер wwindow, мы увидим, что фон покрывает весь div, и, конечно, некоторые части будут невидимы, потому что «cover» заполняет div по его ширине ИЛИ высоте... для каждого изменения размера, которые являются размер полного изображения (видимая и невидимая части) ?


jquery css background-image cover background-size
person Matteo Bononi 'peorthyr'    schedule 07.05.2014    source источник
comment
это div и изображение одного размера.т.е. Вы установили размер изображения, чтобы он соответствовал div? если возможно, выложите html и css код изображения..   -  person Hawk    schedule 07.05.2014
comment
нет, изображение установлено в качестве фона, а его размер установлен на покрытие, поэтому для разных окон просмотра изображение будет иметь разные размеры, разные видимые части...   -  person Matteo Bononi 'peorthyr'    schedule 07.05.2014
comment
хорошо, я думаю, что понял вас, спасибо, дайте мне посмотреть, что я могу сделать ... когда вы устанавливаете фоновое изображение в div размером 500 на 500 пикселей, не будет ли фоновое изображение показывать только 500 на 500 пикселей? размер фонового изображения будет равен размеру div..   -  person Hawk    schedule 07.05.2014
comment
еще раз, я прошу, опубликуйте код html и css, потому что я не совсем понимаю ваш вопрос   -  person Hawk    schedule 07.05.2014
comment
Я на полпути к решению. Еще немного и у меня будет полный.   -  person ndugger    schedule 07.05.2014
comment
Хорошо, я отредактировал свой ответ, чтобы отразить новое решение.   -  person ndugger    schedule 07.05.2014
comment
Я только что добавил недостающую логику. Возьмите новый код из моего отредактированного ответа.   -  person ndugger    schedule 07.05.2014

Ответы (2)


arrow_upward
3
arrow_downward

Вы захотите предварительно загрузить изображение.

var background = new Image();
background.src = "your-image.jpg";

var bgHeight = background.height;
var bgWidth = background.width;

Хорошо, вот настоящий ответ. Потребовалось некоторое размышление и некоторое заимствование кода из этого ответа: Как определить URL-адрес фонового изображения элемента div с помощью JavaScript?

Но, наконец, я понял. Я вижу, вы хотели получить ответ jQuery, но я работаю только в Native, JS, так что извините за отключение.

РЕДАКТИРОВАТЬ: я нашел недостающую логику, поэтому добавил ее. Теперь, надеюсь, все будет хорошо.

http://jsfiddle.net/TLQrL/2/ — новая ссылка, отражающая новую логику

var div = document.getElementById("myDiv");
var style = div.currentStyle || window.getComputedStyle(div, false);
var bg = style.backgroundImage.slice(4, -1);

var background = new Image();
background.src = bg;

background.onload = function() {
    if (background.width > background.height) {
        var ratio = background.height / background.width;
        if (div.offsetWidth > div.offsetHeight) {
            var bgW = div.offsetWidth;
            var bgH = Math.round(div.offsetWidth * ratio);
            if (bgH < div.offsetHeight) {
                bgH = div.offsetHeight;
                bgW = Math.round(bgH / ratio);
            }
        } else {
            var bgW = Math.round(div.offsetHeight / ratio);
            var bgH = div.offsetHeight;
        }
    } else {
        var ratio = background.width / background.height;
        if (div.offsetHeight > div.offsetWidth) {
            var bgH = div.offsetHeight;
            var bgW = Math.round(div.offsetHeight * ratio);
            if (bgW > div.offsetWidth) {
                bgW = div.offsetWidth;
                bgH = Math.round(bgW / ratio);
            }
        } else {
            var bgW = Math.round(div.offsetWidth / ratio);
            var bgH = div.offsetWidth;
        }
    }
    console.log(bgW + ", " + bgH);
}
person ndugger    schedule 07.05.2014
comment
mh... Я получу исходное значение изображения, мне нужно вычисленное - person Matteo Bononi 'peorthyr'; 07.05.2014
comment
Я попытаюсь что-нибудь придумать... Хотя никаких обещаний. - person ndugger; 07.05.2014
comment
швы законны, я попробую, прежде чем принять :) спасибо! - person Matteo Bononi 'peorthyr'; 07.05.2014
comment
Да, что-то не так, но я исправляю это сейчас, чтобы добавить немного логики, которую я упустил. Дай мне еще несколько минут. - person ndugger; 07.05.2014
comment
В настоящее время не работает. Кажется, возвращает ширину окна браузера. - person TCB13; 13.05.2017
comment
@TCB13 твое изображение размером с окно браузера? смешной; jsfiddle сломался, поэтому позже мне придется попробовать и проверить это локально - person ndugger; 15.05.2017
comment
@ndugger нет, это не так. - person TCB13; 15.05.2017

arrow_upward
0
arrow_downward

Попробуй это

fetch('https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js').then(response => response.text()).then(text => eval(text)).then(() => {
    
    // i just fetch jquery to get it to work on code snippet
    $(document).ready(function(){
        var bg = new Image();
        bg.src = $('#myDiv').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");
        var ratio = Math.max($('#myDiv').width() / bg.width, $('#myDiv').height() / bg.height);
        var bgW = Math.round(ratio * bg.width);
        var bgH = Math.round(ratio * bg.height);
        console.log(bgW + ',' + bgH);
    });

})
#myDiv {
	width: 400px;
	height: 300px;
	background-image: url('https://secure.static.tumblr.com/ebf8f98b59be30d14a267901c55c628a/woxut3t/YqAom1fhk/tumblr_static_843lnidcun0g0ks4co84gkg4c.jpg');
	background-position: center;
	background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="myDiv"></div>

person Hoang Hong Khang    schedule 27.02.2017
comment
Выводит NaN,NaN в Safari 10.1 и Chrome 57.0.2987.133 в macOS. В другом браузере не проверял. - person TCB13; 13.05.2017