Question

我正在尝试使用JavaScript动态调整背景图像的大小，以获取图像的高度并设置页面上div的高度。不确定为什么这不起作用

任何帮助将不胜感激。

我当前的代码：

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Building Layout - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="mainScripts.js"></script>
</head>

<body>

<div id="background-image">


<div>
<!--Drag and Drop tiles go here-->
</div>
</div>

</div>  
</body>
</html>

CSS

#background-image {
   background-repeat: no-repeat;
}

JavaScript

var img = new Image();
img.onload = function() {
    document.getElementById('background-image').style.height = this.height;
}
img.src = 'floorplan.jpg';

Answer 1

看起来您需要在this.height的数字后提供“ px”，如下所示：

document.getElementById('background-image').style.height = this.height + "px";

Answer 2

我知道您想要javascript，但也许您也可以使用唯一的CSS解决方案。这样应该可以轻松解决您的问题。

.image {
  background: url('https://www.w3schools.com/w3css/img_lights.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="image">
  
</div>

使用Java自动将div调整为背景图像的高度

2 个答案: