CSS permite que los usuarios de un sitio web puedan controlar el tamaño de un elemento HTML, por medio de una propiedad denominada como resize.
Esta propiedad es añadida al estándar de CSS en el año 2002, y su función es especificar si el tamaño de un elemento puede ser redimensionado por el usuario y a lo largo de cuáles ejes puede modificarlo.
La sintaxis es la siguiente:
resize: none | both | horizontal | vertical | initial | inherit;
| none | Valor por defecto. El usuario no puede redimensionar el elemento. |
| both | El usuario puede redimensionar tanto la altura como la anchura del elemento. |
| horizontal | El usuario puede redimensionar la anchura del elemento. |
| vertical | El usuario puede redimensionar la altura del elemento . |
| initial | Establece el valor por defecto de esta propiedad. |
| inherit | Hereda el valor de su elemento padre. |
Para que esta propiedad funcione correctamente, el overflow del elemento que se desea redimensionar debe ser distinto a visible.
La propiedad resize no aplica en un elemento <img>, sin embargo, si deseamos que los usuarios puedan redimensionar una imagen podemos encerrarla dentro de otro elemento redimensionable, por ejemplo un <div>.
En el siguiente ejemplo vamos a colocar un párrafo dentro de un elemento <div> que puede ser redimensinado de forma horizontal y vertical.
<div>
<p>Presiona con el puntero del ratón la esquina inferior derecha del elemento y arrástrala hacia abajo o hacia arriba para cambiar su altura, o hacia la izquierda o hacia la derecha para cambiar su anchura.</p>
</div>La regla CSS:
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}See the Pen Propiedad resize by simplicitytree (@simplicitytree) on CodePen.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
