CSS zoom属性实例讲解

CSS中的zoom属性用于scale-up或scale-down的内容。在其他一些浏览器不支持Internet Explorer之前，已为Internet Explorer实现了此属性。

用法:

zoom:percentage | number | normal;

属性值：该属性接受上述和以下所述的三种类型的值：

percentage:此属性保存的数字与原始内容相比将增加或减少的百分比使zoom-in或输出取决于数字，例如zoom:150%;。这意味着内容将比原始内容大150％。
number:该属性保存将要乘以原始内容的数字，从而使zoom-in或根据数字zoom:1.5;。这意味着内容将是原始内容的1.5倍。
normal:此属性保存不放大或缩小的普通内容，本质上，此属性告诉浏览器zoom:1

例：本示例使用CSS zoom属性调整图像大小。

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>  
        CSS | zoom property  
    </title>  
  
    <style>  
        h1 {  
            color:green;  
        }  
        .left{ 
            zoom:1.2; 
        } 
    </style>  
</head>  
  
<body>  
    <center>  
        <h1>GeeksforGeeks</h1>  
          
        <h4>CSS | zoom property</h4>  
          
        <div>  
            <img class="left" src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png"
                alt="Sample image">  
  
            <img class="right" src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png"
                alt="Sample image">  
        </div>  
    </center>  
<body>  
  
</html>

输出：

支持的浏览器：CSS zoom属性支持的浏览器如下：

谷歌浏览器
IE浏览器
Safari