Ostatnio edytowany:

zoom

Autor: Virtual Patriot

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

Dodatkowe techniczne informacje o właściwości zoom

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości zoom

Firefox

nie

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

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

normal

Opis

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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

liczba

Opis

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

Warto wiedzieć, że

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:#CBFFFF;
      }
    </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>