美好的一天。我有一个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的宽度或高度......对于每个resize，这是整个图像的尺寸（可见和不可见的部分）？
你会想要预装图像。
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);
}
试试这个
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>