Thuộc tính zoom CSS

Định nghĩa và cách sử dụng

zoom Thuộc tính chỉ định tỷ lệ thu phóng của phần tử. Các phần tử có thể được phóng to hoặc thu nhỏ.

Mẫu

Ví dụ 1

Sử dụng cho văn bản zoom Thuộc tính:

p.a {
  zoom: normal;
}
p.b {
  zoom: 150%;
}
p.c {
  zoom: 0.6;
}

Thử ngay

Ví dụ 2

Sử dụng zoom Cân chỉnh kích thước phần tử:

div {
  border-radius: 100%;
  background: #73AD21;
  padding: 20px;
  width: 80px;
  height: 80px;
}
div.a {
  zoom: normal;
}
div.b {
  zoom: 150%;
}
div.c {
  zoom: 0.6;
}

Thử ngay

Ngôn ngữ CSS

zoom: normal|%|number|unset|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
normal Giá trị mặc định. Các phần tử được hiển thị theo cách bình thường.
%

Đ指定 tỷ lệ thu phóng dưới dạng phần trăm.

100% = Bình thường.

Để phóng to, sử dụng giá trị lớn hơn 100%.

Để thu nhỏ, sử dụng giá trị nhỏ hơn 100%.
number

Đ指定 tỷ lệ thu phóng dưới dạng số (phần trăm).

1.0 = Bình thường.

Để phóng to, sử dụng giá trị lớn hơn 1.0.

Để thu nhỏ, sử dụng giá trị nhỏ hơn 1.0.
unset Hủy thiết lập tỷ lệ thu phóng (khôi phục về bình thường).
initial Thiết lập thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thiết lập thuộc tính này bằng cách kế thừa từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: normal
Kế thừa: Không
Chế tạo animation: Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: Module Viewport CSS Level 1
Ngôn ngữ lập trình JavaScript: object.style.zoom = "3"

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
1 12 126 3.1 15.0