Propriedade CSS resize

A propriedade CSS resize controla se — e em qual direção — o usuário pode redimensionar um elemento arrastando-o. Quando o redimensionamento está ativado, o navegador exibe uma pequena alça de arrastar (geralmente um botão triangular) no canto inferior direito do elemento, permitindo que os visitantes estiquem ou encolham a caixa por conta própria.

Esta propriedade é uma das propriedades CSS3. Sua aparência mais familiar é no elemento <textarea>, que é redimensionável por padrão na maioria dos navegadores. Com resize, você pode estender o mesmo comportamento a outras caixas — ou desativá-lo em um <textarea> onde o redimensionamento livre quebraria seu layout.

Os quatro valores padrão são none, both, horizontal e vertical. Dois valores adicionais, block e inline, redimensionam em relação à direção de escrita e ainda são considerados experimentais.

Informação

resize só tem efeito quando o elemento pode realmente recortar seu próprio conteúdo. É ignorado em elementos inline e em qualquer elemento cujo overflow seja visible (o padrão). Para fazer o resize funcionar em um bloco genérico como um <div>, defina overflow como auto, scroll ou hidden. Um <textarea> funciona sem isso porque já estabelece seu próprio contêiner de rolagem.

Valor Inicial	none
Aplica-se a	Elementos com overflow diferente de visible, e opcionalmente elementos substituídos que representam imagens ou vídeos, e iframes.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	Object.style.resize = "horizontal";

Sintaxe

resize: none | both | horizontal | vertical | block | inline | initial | inherit;

Combine resize com overflow e um width/height inicial razoável para que a caixa tenha um tamanho definido a partir do qual redimensionar. Você também pode querer min-width/max-width (ou seus equivalentes de altura) para manter a caixa dentro de limites razoáveis.

Exemplo da propriedade resize com o valor "both"

<!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>

Experimente Você Mesmo »

Aqui tanto a altura quanto a largura do <div> são arrastáveis, porque resize: both é combinado com overflow: auto. Remova a linha overflow e a alça de arrastar desaparece — essa é a razão mais comum pela qual resize "não funciona".

Veja outro exemplo, onde o elemento é redimensionável apenas verticalmente:

Exemplo da propriedade resize com o valor "vertical"

Exemplo de CSS resize redimensionável verticalmente

<!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>

Experimente Você Mesmo »

Outro exemplo onde o elemento é redimensionável apenas horizontalmente:

Exemplo da propriedade resize com o valor "horizontal"

Exemplo de CSS resize redimensionável horizontalmente

<!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>

Experimente Você Mesmo »

Desativando o redimensionamento em um textarea

Um uso muito comum no mundo real é o oposto dos exemplos acima: desativar a alça de arrastar padrão em um <textarea> para que os usuários não possam quebrar um formulário de largura fixa. Defina resize: none (e frequentemente resize: vertical se quiser permitir apenas o crescimento em altura):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea {
        width: 300px;
        height: 100px;
        /* allow the box to grow taller, but never wider */
        resize: vertical;
      }
    </style>
  </head>
  <body>
    <h2>Comment</h2>
    <textarea placeholder="Type your message..."></textarea>
  </body>
</html>

Quando usar

Textareas: o caso cotidiano. Use resize: vertical para permitir que as pessoas aumentem a altura de uma caixa de comentários sem distorcer a largura do formulário, ou resize: none para bloqueá-la completamente.
Painéis e visualizações redimensionáveis: editores de código, comparações de imagens e janelas de chat permitem que os usuários arrastem uma caixa para um tamanho confortável.
Evite em caixas críticas para o layout: se arrastar um elemento sobrepõe ou empurra outros conteúdos de forma imprevisível, deixe resize em none.

Como o redimensionamento apenas altera o tamanho renderizado no navegador e nunca o conteúdo real, não tem efeito sobre o documento que é enviado ou armazenado.

Valores

Valor	Descrição	Experimente
none	O elemento não é redimensionado. Este é o valor padrão desta propriedade.	Experimente »
both	O elemento é redimensionado tanto verticalmente quanto horizontalmente.	Experimente »
horizontal	O elemento é redimensionado apenas horizontalmente.	Experimente »
vertical	O elemento é redimensionado apenas verticalmente.	Experimente »
block	O elemento exibe um mecanismo para permitir que o usuário o redimensione na direção do bloco (horizontalmente ou verticalmente dependendo do valor de writing-mode e direction). Este valor é uma tecnologia experimental.
inline	O elemento exibe um mecanismo para permitir que o usuário o redimensione na direção inline (horizontalmente ou verticalmente dependendo do valor de writing-mode e direction). Este valor é uma tecnologia experimental.
initial	Faz com que a propriedade use seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Prática

Qual propriedade CSS é usada para controlar o comportamento de redimensionamento de um elemento?

resizescaletransformchange