En CSS existe la posibilidad de permitir a los usuarios ajustar el tamaño de un elemento, ya sea a través del eje vertical, a través del eje horizontal o de ambos ejes. Este redimensionamiento de elementos es posible gracias a la propiedad CSS resize, tal y como su nombre inglés indica.
Por defecto, hay un elemento HTML que permite este tipo de redimensionado. Es el caso del elemento <textarea>, que crea un control que permite escribir múltiples líneas de texto plano. En su esquina inferior derecha aparece una marca que indica que desde allí se puede estirar para cambiar sus dimensiones.
Esta característica es bastante útil si tenemos un elemento con contenido no visible y queremos que los usuarios puedan ajustar el tamaño según sus necesidades o preferencias, haciéndolo más grande o más pequeño.
La propiedad CSS resize permite dotar de la capacidad de redimensionamiento a cualquier elemento, siempre y cuando el elemento en cuestión tenga el desbordamiento con cualquier opción que no sea visible.
Vamos a crear un ejemplo de una caja de 200×200 píxeles, de color turquesa, sin contenido, y le añadiremos la propiedad overflow con el valor hidden, así podremos ver el efecto de la propiedad resize.
Código CSS:
.redimensiona {
background: teal;
height: 200px;
overflow: hidden;
resize: both;
width: 200px;
}
Resultado:
Utiliza el puntero o el dedo para arrastrar la esquina inferior derecha del cuadrado turquesa. Así se puede redimensionar el tamaño de la caja.
Lista de valores de la propiedad resize:
| Valor | Descripción |
|---|---|
none | El elemento no se redimensiona. |
both | Redimensiona en vertical y horizontal. |
horizontal | Redimensiona solo en horizontal. |
vertical | Redimensiona solo en vertical. |
El valor por defecto es none. Con este valor, el elemento en cuestión ya no tendrá la capacidad para que el usuario ajuste su tamaño. Se trata de un valor bastante útil, ya que permite, por ejemplo, quitar esta capacidad a elementos que ya la tienen por defecto, como en un control HTML de tipo <textarea>.
Por ejemplo:
textarea {
resize: none;
}
Vamos a crear un elemento que solo se pueda redimensionar a través del eje horizontal. Para ello usaremos el valor horizontal.
Código CSS:
.red-hor {
background: teal;
height: 100px;
overflow: hidden;
resize: horizontal;
width: 200px;
}
Resultado:
Arrastra la esquina inferior derecha hacia la izquierda o hacia la derecha. Observa que el elemento se ajusta solo en el eje horizontal, mientras que la altura se mantiene fija en los 100 píxeles definidos en el elemento.
Consejos de uso
A pesar de que la propiedad resize puede mejorar la experiencia del usuario, permitiendo ajustes personalizados sobre ciertos elementos, es importante tener en cuenta algunas cuestiones acerca de la accesibilidad.
Es importante no abusar de la característica del redimensionamiento. No todos los elementos deben ser ajustables en tamaño. Utiliza esta propiedad solo cuando tenga sentido hacerlo. Por ejemplo, es lógico en los elementos <textarea>, ya que el usuario puede necesitar más espacio para añadir texto.
Asegúrate de que el redimensionamiento no interfiere con el diseño web responsive. Un elemento redimensionable podría complicar el diseño en ciertos tamaños de pantalla. Por tanto, hay que utilizarlo de forma adecuada.
En conclusión, la propiedad resize es una herramienta muy útil a la hora de mejorar la interacción del usuario con ciertos elementos de la página web. Sin ninguna duda, esta propiedad otorga una mayor flexibilidad, pero siempre que se implemente sin abusar y de la forma más apropiada posible.
