HTML | DOM 样式 backgroundSize 属性

HTML DOM Style backgroundSize属性用于设置或返回背景图像的大小。

句法：

• 获取 backgroundSize 属性

  object.style.backgroundSize

• 设置 backgroundSize 属性

  object.style.backgroundSize = "auto | length | percentage | 
  cover| contain |initial | inherit"

属性值：

• auto：这用于以原始大小显示背景图像。这是默认值。
• length：用于设置图像的高度和宽度。这两个值分别设置宽度和高度。如果只给出一个值，则另一个值设置为“自动”。
• 百分比：根据父元素的百分比设置宽度和高度。这两个值分别设置宽度和高度。如果只给出一个值，则另一个值设置为“自动”。
• cover：这用于缩放背景图像以覆盖整个容器元素。
• 包含：这用于尽可能大地缩放背景图像，以便高度和宽度都适合容器区域。
• initial ：这用于将此属性设置为其默认值。
• 继承：这从其父级继承了背景大小属性。

1. auto ：这用于以原始大小显示背景图像，这是默认值。

   例子：

     
   
       DOM Style backgroundSize Property
       
           .bg-img {
               height: 200px;
               width: 200px;
               border-style: solid;
               background-image: url(
   'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
               background-repeat: no-repeat;
               /* we set the size ourselves to demonstrate auto */
               background-size: 100px;
           }
       
   
     
   
       GeeksforGeeks
       DOM Style backgroundSize Property
       Click on the button to 
         change the size of the background image
       
       
       Change size of image
     
       
           function changePos() {
               elem = document.querySelector('.bg-img');
     
               // Setting size to auto
               elem.style.backgroundSize = 'auto';
           }
       
   
     

   输出：

   • 在按下按钮之前：

     

   • 按下按钮后：

     

2. length：用于设置图像的高度和宽度。这两个值分别设置宽度和高度。如果只给出一个值，则另一个值设置为“自动”。

   例子：

     
   
       DOM Style backgroundSize Property
       
           .bg-img {
               height: 200px;
               width: 200px;
               border-style: solid;
               background-image: url(
   'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
               background-repeat: no-repeat;
           }
       
   
     
   
       GeeksforGeeks
       DOM Style backgroundSize Property
       Click on the button to 
         change the size of the background image
       
       
       Change size of image
     
       
           function changePos() {
               elem = document.querySelector('.bg-img');
     
               // Setting size to 200px in width
               // and 50px in height
               elem.style.backgroundSize = 
                 '200px 50px';
           }
       
   
     

   输出：

   • 在按下按钮之前：

     

   • 按下按钮后：

     

3. 百分比：根据父元素的百分比设置宽度和高度。这两个值分别设置宽度和高度。如果只给出一个值，则另一个值设置为“自动”。

   例子：

     
   
       DOM Style backgroundSize Property
       
           .bg-img {
               height: 200px;
               width: 200px;
               border-style: solid;
               background-image: url(
   'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
               background-repeat: no-repeat;
           }
       
   
     
   
       
         GeeksforGeeks
      
       DOM Style backgroundSize Property
       Click on the button to 
         change the size of the background image
       
       
       
         Change size of image
       
     
       
           function changePos() {
               elem = document.querySelector('.bg-img');
     
               // Setting size to 25% in width and 50% in height
               elem.style.backgroundSize = '25% 50%';
           }
       
   
     

   输出：

   • 在按下按钮之前：

     

   • 按下按钮后：

     

4. cover：这用于缩放背景图像以覆盖整个容器元素。

   示例 4：

     
   
       DOM Style backgroundSize Property
       
           .bg-img {
               height: 200px;
               width: 200px;
               border-style: solid;
               background-image: url(
   'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
               background-repeat: no-repeat;
           }
       
   
     
   
       GeeksforGeeks
       DOM Style backgroundSize Property
       Click on the button to 
         change the size of the background image
       
       
       Change size of image
     
       
           function changePos() {
               elem = document.querySelector('.bg-img');
     
               // Setting size to cover
               elem.style.backgroundSize = 'cover';
           }
       
   
     

   输出：

   • 在按下按钮之前：

     

   • 按下按钮后：

     

5. 包含：这用于尽可能大地缩放背景图像，以便高度和宽度都适合容器区域。

   示例 5：

     
   
       DOM Style backgroundSize Property
       
           .bg-img {
               height: 200px;
               width: 200px;
               border-style: solid;
               background-image: url(
   'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
               background-repeat: no-repeat;
           }
       
   
     
   
       GeeksforGeeks
       DOM Style backgroundSize Property
       
       Click on the button to 
         change the size of the background image
       
       
       
         Change size of image
     
     
       
           function changePos() {
               elem = document.querySelector('.bg-img');
     
               // Setting size to contain
               elem.style.backgroundSize = 'contain';
           }
       
   
     

   输出：

   • 在按下按钮之前：

     

   • 按下按钮后：

     

6. initial ：这用于将此属性设置为其默认值。

   示例 6：

     
   
       DOM Style backgroundSize Property
       
           .bg-img {
               height: 200px;
               width: 200px;
               border-style: solid;
               background-image: url(
   'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
               background-repeat: no-repeat;
               
               /* we set the size ourselves to demonstrate initial */
               background-size: 100px;
           }
       
   
     
   
       GeeksforGeeks
       DOM Style backgroundSize Property
       Click on the button to 
         change the size of the background image
       
       
       
         Change size of image
       
     
       
           function changePos() {
               elem = document.querySelector('.bg-img');
     
               // Setting size to initial
               elem.style.backgroundSize = 'initial';
           }
       
   
     

   输出：

   • 在按下按钮之前：

     

   • 按下按钮后：

     

7. 继承：这从其父级继承了背景大小属性。

   示例 7：

     
   
       DOM Style backgroundSize Property
       
           .bg-img {
               height: 200px;
               width: 200px;
               border-style: solid;
               background-image: url(
   'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
               background-repeat: no-repeat;
           }
             
           #parent {
               background-size: 100px 200px;
           }
       
   
     
   
       GeeksforGeeks
       DOM Style backgroundSize Property
       Click on the button to 
         change the size of the background image
     
       
           
       
     
       
         Change size of image
      
     
       
           function changePos() {
               elem = document.querySelector('.bg-img');
     
               // Setting size to inherit
               elem.style.backgroundSize = 'inherit';
           }
       
   
     

   输出：

   • 在按下按钮之前：

     

   • 按下按钮后：

     

支持的浏览器： backgroundSize 属性支持的浏览器如下：

• 铬 4.0
• 浏览器 9.0
• 火狐 4.0
• Safari 4.1
• 歌剧 10.5