Cambiar el tamaño - Trucos CSS | Almanaque CSS 2024

La resizepropiedad controla si el usuario puede cambiar el tamaño de un elemento y cómo hacerlo haciendo clic y arrastrando la esquina inferior derecha del elemento.

.module ( resize: both; )

Es muy importante saberlo: resize no hace nada a menos que la overflowpropiedad se establezca en algo distinto de visible, que es su valor inicial para la mayoría de los elementos.

También vale la pena saber que Firefox te permitirá cambiar el tamaño de un elemento más pequeño que su tamaño original. Los navegadores Webkit no le permitirán cambiar el tamaño de un elemento para hacerlo más pequeño, solo más grande (en ambas dimensiones).

Valores

none: el elemento no se puede cambiar de tamaño. Este es el valor inicial para la mayoría de los elementos. El textareaelemento es la excepción más común; en muchos navegadores, su resizevalor predeterminado es both.
both: el usuario puede cambiar el tamaño de la altura y / o ancho del elemento.
horizontal: el usuario puede cambiar el tamaño del elemento horizontalmente (aumentando el ancho).
vertical: el usuario puede cambiar el tamaño del elemento verticalmente (aumentando la altura).
inherit: el elemento hereda el valor de cambio de tamaño de su padre.

Cuando se puede cambiar el tamaño de un elemento, tiene un pequeño identificador de interfaz de usuario en una esquina inferior. El identificador aparece a la derecha en los elementos de la página cuando la página directionestá configurada en ltr(de izquierda a derecha) y a la izquierda en las rtlpáginas (de derecha a izquierda).

Un elemento sin asa (frontal) y con asa (trasera)

Manifestación

El elemento redimensionable en esta demostración es un párrafo. Haga clic en los botones para probar los diferentes resizevalores.

Vea la demostración de cambio de tamaño del lápiz por CSS-Tricks (@ css-tricks) en CodePen.

Relacionado

overflow
direction

Más información

La especificación
Documentos de Mozilla
El artículo de David Walsh
Trucos de Textarea

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.