Atrybut zoom w CSS

Definicja i zastosowanie

zoom Atrybut określa proporcję skalowania elementu. Element może być powiększony lub zmniejszony.

Przykład

Przykład 1

Dla tekstu użyj zoom Atrybut:

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

Spróbuj sam

Przykład 2

Użyj zoom Dostosowanie wymiarów elementu:

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

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość Opis
normal Domyślna wartość. Element jest renderowany w normalny sposób.
%

Określ proporcję skalowania w formie procentu.

100% = normalny.

Aby powiększyć, użyj wartości większej niż 100%.

Aby zmniejszyć, użyj wartości mniejszej niż 100%.
number

Określ proporcję skalowania w formie liczby (procent).

1.0 = normalny.

Aby powiększyć, użyj wartości większej niż 1.0.

Aby zmniejszyć, użyj wartości mniejszej niż 1.0.
unset Anuluj ustawienie proporcji skalowania (wróć do normalnego).
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz initial.
inherit Inhereduje tę właściwość od elementu nadrzędnego. Zobacz inherit.

Szczegóły techniczne

Domyślna wartość: normal
Inheredność: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: Moduł widoku CSS poziomu 1
Gramatyka JavaScript: object.style.zoom = "3"

Obsługa przeglądarki

Tabela liczby oznacza pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
1 12 126 3.1 15.0