Właściwość CSS resize

Definicja stylu, przeznaczenie i użycie resize

Właściwość resize określa, czy / jak użytkownik może zmieniać rozmiar elementu.

Uwaga: właściwość resize nie dotyczy elementów liniowych inline ani elementów blokowych (block ), którym nadano właściwość overflow:visible. Dlatego upewnij się, czy właściwość overflow jest ustawiona na scroll, auto lub hidden.

Wartości właściwości resize

Wartość	Opis
none	Domyślna wartość. Użytkownik nie może zmienić rozmiaru elementu.
both	Użytkownik może zmienić zarówno wysokość, jak i szerokość elementu.
horizontal	Użytkownik może zmienić szerokość elementu.
vertical	Użytkownik może zmienić wysokość elementu.
initial	Ustawia tę właściwość na jej wartość domyślną.
inherit	Dziedziczy tę właściwość z elementu nadrzędnego.

Składnia CSS resize

Wsparcie przeglądarek dla właściwości resize

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Liczba przed -moz- określa pierwszą wersję, która działała z prefiksem.

Właściwość
resize	4.0	79.0	5.0 4.0 -moz-	4.0	15.0

Przykładowe zastosowania z właściwością resize

Rezultat:

Zmień właściwość resize i spróbuj zmienić rozmiar tego elementu DIV.

Kod CssCSS Code:

#myDIV {
  resize:both;
  overflow:auto;  
}

Przykłady właściwości resize

Przykład 1. Użytkownik może zmienić zarówno wysokość, jak i szerokość elementu <div>: div { resize: both; overflow: auto; } Przykład 2. Pozwala zmienić rozmiar tylko wysokości elementu <div>: div { resize: vertical; overflow: auto; } Przykład 3. Pozwala użytkownikowi zmienić rozmiar tylko szerokości elementu <div>: div { resize: horizontal; overflow: auto; }