如何使用CSS拉伸和缩放背景图像？

想要使用CSS拉伸和缩放背景图像，可以使用background-size属性；background-size属性指定背景图像的尺寸，可用于拉伸和缩放背景图像。

image

语法：

background-size: auto|length|cover|contain|initial|inherit;

属性值：

●　cover：用于沿X和Y方向拉伸背景图像并覆盖整个区域。

●　length：用于缩放背景图像。它改变了背景图像的大小。长度值可以是px、em%等形式。

●　contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

示例1：在x和y方向上拉伸背景图像

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
    /*background-size: 100% auto no-repeat */ 
         #example1 { 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             border: 2px solid black; 
             background: url(1.jpg); 
             background-repeat: no-repeat; 
             background-size: 100% auto; 
         } 
         /*background-size:auto no-repeat*/ 
         #example2 { 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             border: 2px solid black; 
             background: url(1.jpg); 
             background-repeat: no-repeat; 
             background-size: auto; 
         } 
         /* background-size: cover no-repeat */ 
         #example3 { 
             border: 2px solid black; 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             background: url(1.jpg); 
             background-repeat: no-repeat; 
             background-size: cover; 
         } 
      </style> 
   </head> 

   <body> 
      <h2>background-size: 100% auto :</h2> 
      <p> 背景图像以其原始大小显示。</p> 
      <div id="example1"></div> 

      <h2>background-size: auto (default):</h2> 
      <p>背景图像设置为auto。</p> 
      <div id="example2"></div> 

      <h2>background-size: cover:</h2> 
      <p> 背景图像设置为cover到指定区域。
      </p> 
      <div id="example3"></div> 

   </body> 
</html>

效果图：

e56a9de49a71d3f5cc5b8fa5624b215.png

示例2：缩放背景图像

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>

         #example1 { 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             border: 2px solid black; 
             background: url(1.jpg); 
             background-repeat: no-repeat; 
             background-size: initial; 
         } 

         #example2 { 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             border: 2px solid black; 
             background: url(1.jpg); 
             background-size: contain; 
         } 

         #example3 { 
             border: 2px solid black; 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             background: url(1.jpg); 
             background-repeat: no-repeat; 
             background-size: 300px 100px; 
         } 
      </style> 
   </head> 

   <body> 
      <h2>background-size: initial:</h2>
      <p> 背景图像以其原始大小显示。</p> 
      <div id="example1"></div> 

      <h2>background-size: contain:</h2> 
      <p>背景图像设置为auto。</p> 
      <div id="example2"></div> 

      <h2>background-size: 300px 100px:</h2> 
      <p> 背景图像设置为cover到指定区域。
      </p> 
      <div id="example3"></div> 

   </body> 
</html>

效果图：

9ab42d70c8481a1bd3330cd964a5cdf.png

原文地址：如何使用CSS拉伸和缩放背景图像？