resize

Resumen

La propiedad resize de CSS permite controlar la capacidad de cambio de tamaƱo de un elemento.

Valor inicialnone
Applies toelements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden Ćŗnico no-ambigĆ¼o definido por la gramĆ”tica formal

Sintaxis

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;

/* Global values */
resize: inherit;
resize: initial;
resize: unset;

Valores

none
El elemento no efrece mĆ©todo para que el usuario controle el cambio de tamaƱo del elemento.
both
El elemento efrece un mecanismo que permite al usuario cambiar el tamaƱo del elemento el cual puede ser tanto horizontal como verticalmente.
horizontal
El elemento efrece un mecanismo que permite al usuario cambiar el tamaƱo del elemento sĆ³lo horintalmente.
vertical
El elemento efrece un mecanismo que permite al usuario cambiar el tamaƱo del elemento sĆ³lo verticalmente.
Nota: resize no aplica abloques en los cuales la propiedad overflow es configurada como visible.

Sintaxis formal

none | both | horizontal | vertical | block | inline

Ejemplos

Deshabilitando la capacidad de cambio de tamaƱo de areas de texto

CSS

Por defecto, los elementos <textarea> permiten cambiar el tamaƱo en Gecko 2.0 (Firefox 4). Se puede anular este comportamiento con el CSS mostrado abajo:

textarea.example {
  resize: none; /* disables resizability */
}

HTML

<textarea class="example">Type some text here.</textarea>

Result

Utilizando resize con elementos arbitrarios

Se puede utilizar la propiedad resize para permitir a cualquier elemento ofrecer el mecanismo para cambiar de tamaƱo. En el ejemplo de abajo, un bloque <div> contiene un parrafo (elemento <p>) que permite cambiar su tamaƱo:

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

HTML

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable, because the CSS resize property is set to 'both' on this
    element.
  </p>
</div>

Result

Especificaciones

Compatibilidad de Navegador

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (on <textarea>) 1.0 4.0 (2.0)-moz Sin soporte Sin soporte 3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) 4.0 5.0 (5.0) Sin soporte Sin soporte 4.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (on <textarea>) ? ? ? ? ?
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) ? ? ? ? ?

Ver tambiƩn