Javascript 如何在调整背景大小的同时获得响应的背景图像大小

Javascript 如何在调整背景大小的同时获得响应的背景图像大小,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个背景图像如下的: #container { background-image: url("../img/bg.jpg"); background-size: 100% auto; } 我有一个Id为容器的div <div id="container"></div> 当我调整浏览器窗口的大小时,我的背景图像当然也会被缩放,我想用纯js或j query获得背景图像实际缩放大小的高度,怎么做 jsfiddle 您可以像这样使用JQuery来获取容器的

我有一个背景图像如下的

#container {
    background-image: url("../img/bg.jpg");
    background-size: 100% auto;
}
我有一个Id为容器的div

<div id="container"></div>
当我调整浏览器窗口的大小时,我的背景图像当然也会被缩放,我想用纯js或j query获得背景图像实际缩放大小的高度,怎么做

jsfiddle

您可以像这样使用JQuery来获取容器的大小:

$('#container').height()
更新:


要获得div中背景图像的大小,您应该按照Vilius Paulauskas answer中的步骤进行操作。

以下是我认为您正在努力实现的一个示例

var container=document.getElementById(“容器”);
变量侦听器=函数(evt){
var newRect=container.getBoundingClientRect();
//您可以减去任何边界填充或边距以获得图像高度
var newHeight=newRect.height;
//您可以减去任何边界填充或边距以获得图像宽度
var newWidth=newRect.width;
控制台日志(“新高度”,新高度);
console.log(“新宽度”,新宽度);
}
document.body.addEventListener(“resize”,listener)
#容器{
位置:绝对位置;
显示:块;
最大宽度:1960px;
最大高度:1960px;
宽度:100%;
身高:100%;
背景尺寸:封面;
背景重复:无重复;
光标:指针;
背景图像:url(“https://images.unsplash.com/photo-1532976845185-2d8b3fabc79b?ixlib=rb-0.3.5&ixid=Eyjhchbawqiojeymdd9&s=81a3a29ef3307651434a0312e7f&auto=format&fit=crop&w=1000&q=80“;
背景尺寸:100%自动;
}

你能在jsfiddle上提供一些演示吗?你试过
背景尺寸:contain?我需要使用背景尺寸和封面来查看任何尺寸的所有图像它给了我容器的高度,但我想得到背景图像的高度,因为背景图像高度随浏览器大小的变化而变化,我已经看到了如何做到这一点的答案,这里显示的是bg图像的绝对尺寸,我想得到实际尺寸调整窗口大小时的背景图像
$('#container').height()