Hướng dẫn css auto zoom to fit - css tự động thu phóng để phù hợp

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.

/* 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;

Thuộc tính CSS zoom: (2, 2.5) 4 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ử. zoom: (2, 2.5) 5 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: (2, 2.5) 4 ảnh hưởng đến kích thước bố cục của phần tử.

zoom: (2, 2.5)

Cú pháp

Kết xuất yếu tố này ở kích thước bình thường của nó.Do not use this value, use the standard

zoom: (2, 2.5)

transform: scaleX(2) scaleY(1.5);

zoom: (2, 2.5)

transform: scaleX(2) scaleY(1.5);

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: (2, 2.5)

Yếu tố thu phóng. transform: scaleX(2) scaleY(1.5); 1 tương đương với zoom: (2, 2.5) 7. Các giá trị lớn hơn transform: scaleX(2) scaleY(1.5); 1 Thu phóng. Giá trị nhỏ hơn transform: scaleX(2) scaleY(1.5); 1 Thu phóng.

transform: scaleX(2) scaleY(1.5);

transform: scaleX(2) scaleY(1.5);

zoom: (2, 2.5)

transform: scaleX(2) scaleY(1.5);

transform: scaleX(2) scaleY(1.5);

zoom: (2, 2.5)

Loại hoạt hình

zoom =
  normal | reset |  | 

một số nguyên

Cú pháp chính thức

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

zoom: (2, 2.5)

Kết quả

Ví dụ thứ hai

HTML

Tính tương thích của trình duyệt web