Tidadigi Logo

CSS zoom Property

Thuộc tính CSS zoom thay đổi kích thước phần tử. Nó phóng to hoặc thu nhỏ nội dung và kích thước của nó. Ban đầu, nó được dùng cho Internet Explorer, không phải tiêu chuẩn. Vì vậy, nó không được hỗ trợ nhất quán trên các trình duyệt. Điều này làm cho việc sử dụng nó kém tin cậy hơn.

Syntax

zoom: percentage | number | normal;

Property Value

Thuộc tính này chấp nhận ba loại giá trị như đã đề cập ở trên:

  • percentage: Giá trị phần trăm tăng hoặc giảm so với nội dung gốc. Nó giúp phóng to hoặc thu nhỏ tùy thuộc vào số như zoom:150%;. Điều này có nghĩa là nội dung sẽ lớn hơn 150% so với bản gốc.
  • number: Giá trị số này nhân với nội dung gốc để phóng to hoặc thu nhỏ. Ví dụ: zoom:1.5;. Điều này có nghĩa là nội dung sẽ lớn hơn 1.5 lần so với bản gốc.
  • normal: Giá trị này hiển thị nội dung ở kích thước bình thường không phóng to. Về cơ bản, thuộc tính này báo cho trình duyệt zoom:1

Example: Ví dụ này dùng thuộc tính CSS zoom cho ảnh có class "left". Nó phóng to ảnh lên 1.2 lần so với ảnh khác không có zoom.

html 
<!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>

Output:

css-zoom-property

Supported Browsers

Các trình duyệt được hỗ trợ bởi CSS zoom property được liệt kê dưới đây:

  • Google Chrome
  • Internet Explorer
  • Safari

Last Updated : 21/07/2025