如何使用 JavaScript 设置背景图像的大小？

在本教程中，我们将了解如何使用JavaScript设置背景图像的大小。

网页上的背景效果可以增强其外观。我们可以设置背景颜色或背景图像来增强网页的视觉感受。我们还可以更改背景属性，例如其大小或颜色。

为了增强视觉效果，图像必须以正确的大小和位置放置。通常，我们使用 CSS 来实现这一点，但JavaScript DOM也提供了相关的属性。

因此，让我们看看如何设置背景图像的大小。

以下是我们可以使用 JavaScript 设置背景图像大小的属性：

  • backgroundSize 属性

使用 backgroundSize 属性

JavaScript DOM 为我们在运行时设计页面提供了一种方法。我们甚至可以将图像应用于背景并更改其大小。JavaScript 的 background-size 属性设置背景图像的大小。

如果我们设置 backgroundSize = "100px"，则背景图像的宽度将设置为 100px，高度将自动调整。

如果我们设置 backgroundSize = "100px 200px"，则背景图像的宽度将设置为 100px，高度将设置为 200px。

所有用户都可以按照以下语法使用 backgroundSize 属性，通过 JavaScript 设置背景图像的大小：

语法

document.body.style.backgroundImage = "url(' <image address here> ')";
document.body.style.backgroundSize = "auto || Length || Percentage || Cover || Contain || Initial || Inherit";

参数

  • auto - 显示图像的原始大小（默认值）。
  • 长度 - 可用于设置高度和宽度。如果只提供一个维度，则另一个维度将设置为自动。
  • 百分比 - 以百分比设置高度和宽度
  • Cover - 设置图像，使其覆盖整个元素。
  • Contain - 在父元素内设置尽可能多的图像。
  • Initial - 设置为默认值。
  • Inherit - 继承父元素的属性。

示例 1

您可以尝试运行以下代码，学习如何设置背景图像的大小：

<!DOCTYPE html>
<html>
<head>
<style>
   #box {
      border: 2px dashed blue;
      width: 600px;
      height: 400px;
      background:
      url('https://tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
   }
</style>
</head>
<body>
   <button onclick="display()">Set size of background image</button>
   <div id="box">
   </div>
   <script>
      function display() {
         document.getElementById("box").style.backgroundSize="150px 200px";
      }
   </script>
</body>
</html>

我们可以通过点击底部的“设置背景图像大小”按钮来设置背景图像的大小。

示例 2

在下面的示例中，我们使用 backgroundSize 属性来设置背景图像的大小。图像已使用 CSS 应用于 div，并且在点击按钮时会改变其形状，如果再次点击则会恢复到原始形状。

<html>
<head>
<style>
   #image_div{
      width: 40%;
      height: 30%;
      background-image:
      url(https://www.tutorialspoint.com/images/logo.png);
   }
   #btn{
      padding: 5px;
      margin: 5px;
   }
</style>
</head>
<body>
   <h2> Use <i> backgroundSize </i> to set the size of the background image
   </h2>
   <div id="image_div"> </div>
   <button id="btn">
   Click to apply the background image and change its size
   </button>
   <script>
   var element=document.getElementById("btn");
   var div=document.getElementById("image_div");
   element.addEventListener("click",changeShape);
   function changeShape(){
      if(!div.style.backgroundSize){
         div.style.backgroundSize="100% 100%";
      } else {
         div.style.backgroundSize=null;
      }
   }
   </script>
</body>
</html>

在上面的示例中，用户可以看到我们使用了 backgroundSize 属性来在点击应用于容器的按钮后设置背景图像的大小。

示例 3

在下面的示例中，我们将从用户那里获取图像宽度和高度的两个值。我们还通过单选按钮接受值的参数（em、px、% 和 cm）。首先，我们将从用户那里获取一个整数值，并将选定的参数附加到它。点击按钮后，我们将运行一个函数，该函数将根据用户提供的数值设置背景图像的大小。

<html>
<head>
<style>
   #container{
      width: 90%;
      height: 90%;
      background-image:
      url(https://www.tutorialspoint.com/images/logo.png);
      padding: 10px;
      margin: 10px;
   }
</style>
</head>
<body>

   <h3> Use <i> backgroundSize </i> to set the size of the background image </h3>
   <div id="container">
   </div>
   <label for="w_input"> Width(only integer)(required) : </label>
   <input type="text" name="value1" id="w_input"/> <br>
   <label for="h_input"> Heigth(only integer)(optional) : </label>
   <input type="text" name="value2" id="h_input"/> <br>
   <input type="radio" name="radio_btn" id="pixel" value="px"/>
   <label for="pixel"> px </label> <br>
   <input type="radio" name="radio_btn" id="emph" value="em"/>
   <label for="emph"> em </label> <br>
   <input type="radio" name = "radio_btn" id="percent" value="%"/>
   <label for="percent"> % </label> <br>
   <input type="radio" name="radio_btn" id="centime" value="cm"/>
   <label for="centime"> cm </label> <br>
   <button id="btn"> Set background Image size </button>
   <script>
      var element=document.getElementById("container");
      var button=document.getElementById("btn");
      button.addEventListener("click", set_Size);
      function set_Size(){
         var width=document.getElementById("w_input").value;
         var heigth=document.getElementById("h_input").value;
         var radio_selected=document.querySelector('input[name="radio_btn"]:checked');
         var width_length=width + radio_selected.value;
         if(heigth){
            var heigth_length=heigth + radio_selected.value;
            var width_heigth=width_length + " " + heigth_length;
         } else {
            var width_heigth=width_length;
         }
         element.style.backgroundSize=width_heigth;
      }
   </script>
</body>
</html>

在上面的示例中，用户可以看到我们通过点击按钮更改了容器内背景图像的大小。

在本教程中，我们学习了如何使用 JavaScript 设置背景图像的大小。

更新于：2022-11-22

5K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.