Autor publikacji: Virtual Patriot - Administrator

zoom

Data publikacji: Sierpień 15 2012
Ostatnio edytowano: Wrzesień 07 2020

Przeznaczenie właściwości `zoom`

Za pomocą właściwości zoom możemy określić odległość interesującego nas elementu HTML od naszego wzroku.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `zoom`

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: nie
wartość initial: normal
wyjątki initial: brak
animowanie: tak (animacja schodkowa)

Interpretacja właściwości `zoom`

: nie
: tak
: tak
: tak
: tak
: tak

Zobacz więcej informacji o interpretacji właściwości zoom.

Opis wartości właściwości `zoom`

normal

Wyjaśnienie

Wartość normal jest domyślną wartością właściwości zoom.

Domyślnie pierwotna odległość elementu HTML od naszego wzroku nie jest zmieniona.

Wartość "normal" jest równoznaczna z wartością "1".

Przykład

  zoom:normal;

ten element "div" posiada pierwotną odległość od naszego wzroku

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" posiada pierwotną odległość od naszego wzroku
    </div>

  </body>
</html>

liczba

Wyjaśnienie

Za pomocą właściwości zoom oraz dowolnej dodatniej liczby lub za pomocą procentów możemy określić odległość interesującego nas elementu HTML od naszego wzroku.

Informacje dodatkowe

wartość 1 jest równoznaczna z wartością 100%, wartość 0.75 jest równoznaczna z wartością 75%, wartość 1.25 jest równoznaczna z wartością 125% itd.

wartości z zakresu 0 - 100% oddalają element HTML od naszego wzroku

wartości większe od wartości 100% przybliżają element HTML do naszego wzroku

Przykład

  zoom:125%;

ten element "div" został przybliżony do naszego wzroku o 25 procent, ponieważ do tego elementu "div" została dodana właściwość "zoom" wraz z wartością "125%"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        zoom:125%;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" został przybliżony do naszego wzroku o 25 procent, ponieważ do tego elementu "div" została dodana właściwość "zoom" wraz z wartością "125%"
    </div>

  </body>
</html>