resize

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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
Valor calculadocomo se especifica
Animation typediscrete

Sintaxis

css
/* 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

resize = 
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:

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

HTML

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

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

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

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

HTML

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

Specification
CSS Basic User Interface Module Level 4
# resize

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
resize
block
Support on block level, replaced, table cell, or inline block elements
inline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Ver también