W3docs
es
Iniciar sesión

Propiedad CSS resize

How to use the resize CSS property to add resizing mechanism to the element. See property values and try examples.

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 inicialnone
Se aplica aElementos con overflow distinto de visible, y opcionalmente elementos reemplazados que representan imágenes o vídeos, e iframes.
HeredableNo.
AnimableNo.
VersiónCSS3
Sintaxis DOMObject.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>
Pruébalo tú mismo »

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>
Pruébalo tú mismo »

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>
Pruébalo tú mismo »

Valores

ValorDescripciónProbar
noneEl elemento no se redimensiona. Este es el valor predeterminado de esta propiedad.Probar »
bothEl elemento se redimensiona tanto vertical como horizontalmente.Probar »
horizontalEl elemento se redimensiona solo horizontalmente.Probar »
verticalEl elemento se redimensiona solo verticalmente.Probar »
blockEl 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.
inlineEl 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.
initialHace que la propiedad utilice su valor predeterminado.Probar »
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

¿Qué propiedad CSS se utiliza para controlar el comportamiento de redimensionamiento de un elemento?