Ejemplo
Especificar que un <div> elemento debe ser de tamaño variable por el usuario:
div {
resize: both;
overflow: auto;
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad de cambio de tamaño especifica si un elemento es de tamaño variable por el usuario.
Note: La propiedad de cambio de tamaño se aplica a los elementos cuyo valor es calculado desbordamiento algo que no sea "visible" .
| Valor por defecto: | none |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.resize="both" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -moz- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| resize | 4.0 | No soportado | 5.0 4.0 -moz- | 4.0 | 15.0 |
sintaxis CSS
resize: none|both|horizontal|vertical|initial|inherit;Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| none | Valor por defecto. El usuario no puede cambiar el tamaño del elemento | Juegalo " |
| both | El usuario puede ajustar tanto la altura como la anchura del elemento | Juegalo " |
| horizontal | El usuario puede ajustar la anchura del elemento | Juegalo " |
| vertical | El usuario puede ajustar la altura del elemento | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Permite al usuario cambiar el tamaño solamente la altura de un <div> elemento:
div
{
resize: vertical;
overflow:
auto;
}
Inténtalo tú mismo " Ejemplo
Permite al usuario cambiar el tamaño de sólo el ancho de un <div> elemento:
div
{
resize: horizontal;
overflow:
auto;
}
Inténtalo tú mismo " Ejemplo
De forma predeterminada, <textarea> elementos son de tamaño variable. Utilice la propiedad de cambio de tamaño para evitar que las áreas de texto para cambiar de tamaño (disable the "grabber" in the textarea) :
textarea {
resize: none;
}
Inténtalo tú mismo " Páginas relacionadas
CSS3 tutorial: Interfaz de usuario CSS3
Referencia HTML DOM: resize property