Muuta kokoa - CSS-temppuja | CSS-almanakka 2025

resizeOmaisuus tarkastaa, jos ja miten elementin kokoa voi muuttaa käyttäjän napsauttamalla ja vetämällä oikeaa alakulmaa elementin.

.module ( resize: both; )

Erittäin tärkeää tietää: resize ei tee mitään, ellei overflowominaisuus ole asetettu muulle kuin visible, mikä on sen alkuarvo useimmille elementeille.

On myös syytä tietää, että Firefox antaa sinun muuttaa alkuperäistä kokoa pienemmän elementin kokoa. Webkit-selaimet eivät anna sinun muuttaa elementin kokoa pienemmäksi, vain suuremmaksi (molemmissa ulottuvuuksissa).

Arvot

none: elementin kokoa ei voi muuttaa. Tämä on useimpien elementtien alkuarvo. textareaElementti on yleisin poikkeus-monissa selaimissa oletusarvona resizearvo both.
both: Käyttäjä voi muuttaa elementin korkeuden ja / tai leveyden kokoa.
horizontal: Käyttäjä voi muuttaa elementin kokoa vaakasuunnassa (lisätä leveyttä).
vertical: Käyttäjä voi muuttaa elementin kokoa pystysuunnassa (lisätä korkeutta).
inherit: elementti perii vanhemmansa koon arvon.

Kun elementin kokoa voidaan muuttaa, sen alaosassa on pieni käyttöliittymän kahva. Kahva näkyy sivuelementtien oikealla puolella, kun sivun directionarvo on ltr(vasemmalta oikealle), ja vasemmalta sivulta rtl(oikealta vasemmalle).

Elementti ilman kahvaa (edessä) ja kahvalla (takana)

Demo

Tämän esittelyn koon muuttava elementti on kappale. Kokeile eri resizearvoja napsauttamalla painikkeita .

Katso CSS-Tricksin kynän koon esittely (@ css-tricks) CodePenistä.

Liittyvät

overflow
direction

Lisää tietoa

Spec
Mozilla Docs
David Walshin artikkeli
Textarean temppuja

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.