Propiedad CSS resize
La propiedad CSS resize especifica cómo se puede redimensionar el elemento. Controla la apariencia y el funcionamiento del mecanismo de redimensionamiento. Este mecanismo suele ser una pequeña pestaña triangular en la esquina inferior derecha del elemento.
Esta propiedad es una de las propiedades de CSS3.
Tiene 4 valores: "none", "both", "horizontal" y "vertical". Existen otros dos valores, "block" e "inline", que son tecnología experimental.
INFO
La propiedad resize no se aplica a elementos en línea (inline) ni a elementos de bloque donde overflow está establecido en "visible". Solo acepta los valores "auto", "scroll" y "hidden" de la propiedad overflow.
| Valor inicial | none |
|---|---|
| Se aplica a | Elementos con overflow distinto de visible, y opcionalmente elementos reemplazados que representan imágenes o vídeos, e iframes. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | Object.style.resize = "horizontal"; |
Sintaxis
Sintaxis de CSS resize
resize: none | both | horizontal | vertical | block | inline | initial | inherit;Ejemplo de la propiedad resize con el valor "both":
Ejemplo de código CSS resize
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 1px solid #1c87c9;
background-color: #eee;
padding: 10px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>En el ejemplo anterior, tanto la altura como el ancho del elemento son redimensionables.
Consulta otro ejemplo, donde el elemento es redimensionable solo verticalmente:
Ejemplo de la propiedad resize con el valor "vertical":
Ejemplo de redimensionamiento vertical con CSS resize
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #ccc;
background-color: #eee;
padding: 10px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>Otro ejemplo donde el elemento es redimensionable solo horizontalmente:
Ejemplo de la propiedad resize con el valor "horizontal":
Ejemplo de redimensionamiento horizontal con CSS resize
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 1px solid #8ebf42;
background-color: #eee;
padding: 10px;
width: 300px;
height: 200px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>Valores
| Valor | Descripción | Probar |
|---|---|---|
| none | El elemento no se redimensiona. Este es el valor predeterminado de esta propiedad. | Probar » |
| both | El elemento se redimensiona tanto vertical como horizontalmente. | Probar » |
| horizontal | El elemento se redimensiona solo horizontalmente. | Probar » |
| vertical | El elemento se redimensiona solo verticalmente. | Probar » |
| block | El elemento muestra un mecanismo que permite al usuario redimensionarlo en la dirección del bloque (horizontal o vertical, dependiendo del valor de writing-mode y direction). Este valor es una tecnología experimental. | |
| inline | El elemento muestra un mecanismo que permite al usuario redimensionarlo en la dirección en línea (horizontal o vertical, dependiendo del valor de writing-mode y direction). Este valor es una tecnología experimental. | |
| initial | Hace que la propiedad utilice su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué propiedad CSS se utiliza para controlar el comportamiento de redimensionamiento de un elemento?