Vlastnost změny velikosti CSS
Příklad
Zde může uživatel změnit velikost jak výšky, tak šířky prvku <div>:
div {
resize: both;
overflow: auto;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Tato resize
vlastnost definuje, zda (a jak) může uživatel měnit velikost prvku.
Poznámka: Tato resize
vlastnost se nevztahuje na vložené prvky nebo blokové prvky, kde je overflow="visible". Ujistěte se tedy, že přetečení je nastaveno na „scroll“, „auto“ nebo „hidden“.
Výchozí hodnota: | žádný |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.resize="both" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -moz- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
Syntaxe CSS
resize: none|both|horizontal|vertical|initial|inherit;
Hodnoty vlastností
Value | Description | Play it |
---|---|---|
none | Default value. The user cannot resize the element | |
both | The user can resize both the height and width of the element | |
horizontal | The user can resize the width of the element | |
vertical | The user can resize the height of the element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Další příklady
Příklad
Nechte uživatele změnit velikost pouze na výšku prvku <div>:
div
{
resize: vertical;
overflow: auto;
}
Příklad
Nechte uživatele změnit velikost pouze na šířku prvku <div>:
div
{
resize: horizontal;
overflow: auto;
}
Příklad
V mnoha prohlížečích lze velikost <textarea> ve výchozím nastavení měnit. Zde jsme použili vlastnost resize k deaktivaci změny velikosti:
textarea {
resize: none;
}
Související stránky
CSS tutoriál: CSS uživatelské rozhraní
Odkaz HTML DOM: vlastnost změny velikosti