如何使用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 − 顯示影像的原始大小（預設值）。
  • 長度 − 可用於設定高度和寬度。如果只提供一個維度，則另一個維度將設定為auto。
  • 百分比 − 以百分比設定高度和寬度。
  • cover − 設定影像以覆蓋整個元素。
  • contain − 在父元素內設定儘可能多的影像。
  • initial − 設定為預設值。
  • inherit − 繼承父元素的屬性。

示例1

您可以嘗試執行以下程式碼，學習如何設定背景影像的大小：

<!DOCTYPE html>
<html>
<head>
<style>
   #box {
      border: 2px dashed blue;
      width: 600px;
      height: 400px;
      background:
      url('https://tutorialspoint.tw/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+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告