Hướng dẫn what does css zoom do? - css zoom làm gì?

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

Kết xuất yếu tố này ở kích thước bình thường của nó.

zoom =
  normal | reset |  | 

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

zoom =
  normal | reset |  | 

zoom =
  normal | reset |  | 

Yếu tố thu phóng.

zoom =
  normal | reset |  | 

zoom =
  normal | reset |  | 

zoom =
  normal | reset |  | 

zoom =
  normal | reset |  | 

zoom =
  normal | reset |  | 

Yếu tố thu phóng. Tương đương với tỷ lệ phần trăm tương ứng (

zoom =
  normal | reset |  | 

zoom =
  normal | reset |  | 

zoom =
  normal | reset |  | 

zoom =
  normal | reset |  | 

zoom =
  normal | reset |  | 

Đị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

<p class="small">Smallp>
<p class="normal">Normalp>
<p class="big">Bigp>

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

Bảng BCD chỉ tải trong trình duyệt