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
wyjątki initial
  • brak
animowanie
  • nie

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

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

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