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.Cú pháp
/* Keyword values */
zoom: normal;
zoom: reset;
/* values */
zoom: 50%;
zoom: 200%;
/* values */
zoom: 1.1;
zoom: 0.7;
/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;
Giá trị
zoom = normal | reset | |0
Kết xuất yếu tố này ở kích thước bình thường của nó.
zoom = normal | reset | |1 không chuẩnNon-standard
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 | |2 tiêu chuẩn.Do not use this value, use the standard
zoom = normal | reset | |2 value instead.
zoom = normal | reset | |3
Yếu tố thu phóng.
zoom = normal | reset | |4 tương đương với
zoom = normal | reset | |0. Các giá trị lớn hơn
zoom = normal | reset | |4 Thu phóng. Giá trị nhỏ hơn
zoom = normal | reset | |4 zoom ra.
zoom = normal | reset | |8
Yếu tố thu phóng. Tương đương với tỷ lệ phần trăm tương ứng [
zoom = normal | reset | |9 =
zoom = normal | reset | |4 =
zoom = normal | reset | |0]. Các giá trị lớn hơn
zoom = normal | reset | |9 Thu phóng. Giá trị nhỏ hơn
zoom = normal | reset | |9 Thu phóng.
Định nghĩa chính thức
Cú pháp chính thức
zoom = normal | reset | |
Ví dụ
Ví dụ đầu tiên
HTML
Small
Normal
Big
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
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