Không chuẩn: Tính năng này là không chuẩn và không nằm trên đường tiêu chuẩn. Không sử dụng nó trên các trang web sản xuất đối mặt với web: nó sẽ không hoạt động cho mọi người dùng. Cũng có thể có sự không tương thích lớn giữa việc triển khai và hành vi có thể thay đổi trong tương lai. This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. Thuộc tính CSS không chuẩn có thể được sử dụng để kiểm soát mức độ phóng đại của một phần tử. transform: scale() nên được sử dụng thay vì thuộc tính này, nếu có thể. Tuy nhiên, không giống như các biến đổi CSS, zoom ảnh hưởng đến kích thước bố cục của phần tử.zoom CSS property can be used to
control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element. /* Keyword values */
zoom: normal;
zoom: reset;
/* <percentage> values */
zoom: 50%;
zoom: 200%;
/* <number> values */
zoom: 1.1;
zoom: 0.7;
/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;
zoom =
normal | reset | <number> | <percentage>
0 Kết xuất yếu tố này ở kích thước bình thường của nó.Cú pháp
Giá trị
Không (DE) phóng đại phần tử này nếu người dùng áp dụng phóng to không dựa trên pinch (ví dụ: bằng cách nhấn Ctrl - - hoặc Ctrl + + phím phím bàn phím) vào tài liệu. Không sử dụng giá trị này, thay vào đó, hãy sử dụng giá trị zoom = normal | reset | <number> | <percentage> 2 tiêu chuẩn.Do not use this value, use the standard zoom = normal | reset | <number> | <percentage> 2 value instead.
zoom = normal | reset | <number> | <percentage> 3Yếu tố thu phóng. zoom = normal | reset | <number> | <percentage> 4 tương đương với zoom = normal | reset | <number> | <percentage> 0. Các giá trị lớn hơn zoom = normal | reset | <number> | <percentage> 4 Thu phóng. Giá trị nhỏ hơn zoom = normal | reset | <number> | <percentage> 4 zoom ra.
zoom = normal | reset | <number> | <percentage> 8Yếu tố thu phóng. Tương đương với tỷ lệ phần trăm tương ứng (zoom = normal | reset | <number> | <percentage> 9 = zoom = normal | reset | <number> | <percentage> 4 = zoom = normal | reset | <number> | <percentage> 0). Các giá trị lớn hơn zoom = normal | reset | <number> | <percentage> 9 Thu phóng. Giá trị nhỏ hơn zoom = normal | reset | <number> | <percentage> 9 Thu phóng.
Định nghĩa chính thức
Cú pháp chính thức
zoom = normal | reset | <number> | <percentage>
Ví dụ
Ví dụ đầu tiên
HTML
<p class="small">Small</p> <p class="normal">Normal</p> <p class="big">Big</p>
CSS
body { display: flex; align-items: center; justify-content: space-around; height: 100vh; }
.small { zoom: 75%; } .normal { zoom: normal; } .big { zoom: 2.5; } p:hover { zoom: unset; }
Kết quả
Ví dụ thứ hai
HTML
<div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div>
CSS
div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; zoom: 1.5; } div#a { background-color: gold; zoom: normal; } div#b { background-color: green; zoom: 200%; } div#c { background-color: blue; zoom: 2.9; }
Kết quả
Ví dụ thứ hai
Thông số kỹ thuật
Không phải là một phần của bất kỳ tiêu chuẩn. Khách sạn này có nguồn gốc trong Internet Explorer. Apple có một mô tả trong tài liệu tham khảo Safari CSS. Rossen Atanassov của Microsoft có một đề xuất đặc điểm kỹ thuật không chính thức trên GitHub.
Tính tương thích của trình duyệt web