Question

我有一个<div>，带有这样的背景图片：

#container {
    background-image: url("../img/bg.jpg");
    background-size: 100% auto;
}

并且我的ID容器中有div

<div id="container"></div>

这是我的CSS：

#container {
    position: absolute;
    display: block;
    max-width: 1960px;
    max-height: 1960px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url("../img/bg.jpg");
    background-size:100% auto;
}

当我调整浏览器窗口的大小时，我的背景图像也当然会缩放，并且我想使用纯js或j查询获取我的背景图像的实际缩放大小的高度，该怎么做？

jsfiddle https://jsfiddle.net/cihanzzzz/nqvjLpg9/1/

Answer 1

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

$('#container').height()

更新：

要获取div内背景图片的大小，您应该按照this post

中Vilius Paulauskas答案中的步骤进行操作

Answer 2

以下是我认为您要实现的目标的一个示例。

var container = document.getElementById("container");

var listener = function (evt) {
  var newRect = container.getBoundingClientRect();
  // you could subtract any bounding padding or margin to get image height
  var newHeight = newRect.height;
  // you could subtract any bounding padding or margin to get image width
  var newWidth = newRect.width;
  
  console.log("new height", newHeight);
  console.log("new width", newWidth);
}

document.body.addEventListener("resize", listener);

#container {
  position: absolute;
  display: block;
  max-width: 1960px;
  max-height: 1960px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
   background-image: url("https://images.unsplash.com/photo-1532976845185-2d8b3fabc79b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81a3a29ef330765143527434a0312e7f&auto=format&fit=crop&w=1000&q=80");
    background-size:100% auto;
}

<div id="container"></div>

调整背景大小时如何获得响应式背景图像大小

2 个答案: