Ostatnio edytowany:

resize

Autor: Virtual Patriot

Opis właściwości resize

Za pomocą właściwości resize możemy określić czy rozmiar obszaru zawartości interesującego nas elementu HTML może zostać manualnie zmieniony przez użytkownika. Mowa tu o elemencie HTML, którego właściwość overflow posiada wartość różną od wartości visible.

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

przeznaczenie
dziedziczenie
  • nie
wartość initial
wyjątki initial
animowanie
  • nie

Interpretacja właściwości resize

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

nie

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

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

none

Opis

Wartość none jest domyślną wartością właściwości resize.

Domyślnie rozmiar obszaru zawartości elementu HTML nie może zostać manualnie zmieniony przez użytkownika.

Przykład

rozmiar obszaru zawartości tego elementu "div" nie może zostać manualnie zmieniony przez użytkownika

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 {
        overflow:auto;
        width:50%;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar obszaru zawartości tego elementu "div" nie może zostać manualnie zmieniony przez użytkownika
    </div>

  </body>
</html>

horizontal

Opis

Za pomocą wartości horizontal właściwości resize możemy sprawić, że rozmiar szerokości obszaru zawartości interesującego nas elementu HTML może zostać manualnie zmieniony przez użytkownika.

Przykład

rozmiar szerokości obszaru zawartości tego elementu "div" może zostać manualnie zmieniony przez użytkownika, ponieważ do tego elementu "div" została dodana właściwość "resize" wraz z wartością "horizontal"

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 {
        resize:horizontal;
        overflow:auto;
        width:50%;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar szerokości obszaru zawartości tego elementu "div" może zostać manualnie zmieniony przez użytkownika, ponieważ do tego elementu "div" została dodana właściwość "resize" wraz z wartością "horizontal"
    </div>

  </body>
</html>

vertical

Opis

Za pomocą wartości vertical właściwości resize możemy sprawić, że rozmiar wysokości obszaru zawartości interesującego nas elementu HTML może zostać manualnie zmieniony przez użytkownika.

Przykład

rozmiar wysokości obszaru zawartości tego elementu "div" może zostać manualnie zmieniony przez użytkownika, ponieważ do tego elementu "div" została dodana właściwość "resize" wraz z wartością "vertical"

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 {
        resize:vertical;
        overflow:auto;
        width:50%;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar wysokości obszaru zawartości tego elementu "div" może zostać manualnie zmieniony przez użytkownika, ponieważ do tego elementu "div" została dodana właściwość "resize" wraz z wartością "vertical"
    </div>

  </body>
</html>

both

Opis

Za pomocą wartości both właściwości resize możemy sprawić, że zarówno rozmiar szerokości, jak i rozmiar wysokości obszaru zawartości interesującego nas elementu HTML może zostać manualnie zmieniony przez użytkownika.

Przykład

zarówno rozmiar szerokości, jak i rozmiar wysokości obszaru zawartości tego elementu "div" może zostać manualnie zmieniony przez użytkownika, ponieważ do tego elementu "div" została dodana właściwość "resize" wraz z wartością "both"

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 {
        resize:both;
        overflow:auto;
        width:50%;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      zarówno rozmiar szerokości, jak i rozmiar wysokości obszaru zawartości tego elementu "div" może zostać manualnie zmieniony przez użytkownika, ponieważ do tego elementu "div" została dodana właściwość "resize" wraz z wartością "both"
    </div>

  </body>
</html>