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

相關用法

注：本文由純淨天空篩選整理自skyridetim大神的英文原創作品 CSS | zoom Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。