检索设置为“cover”的背景图像的大小答案

【问题标题】：retrieve the size of a background image set to "cover"检索设置为“cover”的背景图像的大小
【发布时间】：2014-05-07 12:57:41
【问题描述】：

大家好。我有一个 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 的宽度或高度......对于每次调整大小，完整图像的尺寸（可见部分和不可见部分）是多少？

【问题讨论】：

是div和图片大小一样。即。您是否将图像大小设置为适合 div？如果可能，请张贴图片的html和css代码..
不，图片设置为背景，大小设置为覆盖，所以对于不同的视口，图片会有不同的大小，不同的可见部分...
好的，我想我明白了，谢谢，让我看看我能做什么..当你在 500 x 500 像素的 div 中设置背景图像时，背景图像不会只显示500 像素乘 500 像素？背景图像大小将等于 div 大小..
我已经完成了一半的解决方案。再等一会儿，我就会有一个完整的。
我刚刚添加了一些缺少的逻辑。从我编辑的答案中获取新代码。

标签： jquery css background-image cover background-size

【解决方案1】：

你会想要预加载图像。

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

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

好的，这是真正的答案。花了一些思考，并从这个答案中借用了一些代码：How can I determine the background image URL of a div via 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);
}

【讨论】：

mh...我会得到图像的“原始”值，我需要“计算”的值
我会尝试 jsfiddle 一些东西...不过没有承诺。
接缝合法，我会在接受之前尝试一下：）谢谢！
是的，出了点问题，但我现在正在修复它以添加一些我错过的逻辑。再给我几分钟。
当前不工作。似乎返回浏览器窗口的宽度。

【解决方案2】：

试试这个

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>

【讨论】：

在 macOS 上的 Safari 10.1 和 Chrome 57.0.2987.133 上输出 NaN,NaN。没有在任何其他浏览器中测试。