CSS resize Property

La propriété CSS resize spécifie comment l’élément peut être redimensionné. Elle contrôle l’apparence et le fonctionnement du mécanisme de redimensionnement. Ce mécanisme est généralement une poignée triangulaire située dans le coin inférieur droit de l’élément.

Cette propriété fait partie des propriétés CSS3.

Elle possède 4 valeurs : "none", "both", "horizontal" et "vertical". Il existe deux autres valeurs, "block" et "inline", qui relèvent d’une technologie expérimentale.

info

La propriété resize ne s’applique pas aux éléments inline ni aux éléments de bloc pour lesquels overflow est défini sur "visible". Elle n’accepte que les valeurs "auto", "scroll" et "hidden" de la propriété overflow.

Initial Value	none
Applies to	Elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	Object.style.resize = "horizontal";

Syntax

CSS resize syntax

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

Example of the resize property with the "both" value:

CSS resize code example

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

Essayez vous-même »

Dans l’exemple donné, la hauteur et la largeur de l’élément peuvent être redimensionnées.

Voir un autre exemple, où l’élément ne peut être redimensionné que verticalement :

Example of the resize property with the "vertical" value:

CSS resize vertically resizable example

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

Essayez vous-même »

Un autre exemple où l’élément ne peut être redimensionné que horizontalement :

Example of the resize property with the "horizontal" value:

CSS resize horizontally resizable example

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

Essayez vous-même »

Values

Value	Description	Play it
none	L’élément n’est pas redimensionné. C’est la valeur par défaut de cette propriété.	Play it »
both	L’élément est redimensionné à la fois verticalement et horizontalement.	Play it »
horizontal	L’élément est redimensionné uniquement horizontalement.	Play it »
vertical	L’élément est redimensionné uniquement verticalement.	Play it »
block	L’élément affiche un mécanisme permettant à l’utilisateur de le redimensionner dans la direction du bloc (horizontalement ou verticalement selon les valeurs de writing-mode et direction). Cette valeur est une technologie expérimentale.
inline	L’élément affiche un mécanisme permettant à l’utilisateur de le redimensionner dans la direction inline (horizontalement ou verticalement selon les valeurs de writing-mode et direction). Cette valeur est une technologie expérimentale.
initial	Fait utiliser à la propriété sa valeur par défaut.	Play it »
inherit	Hérite de la propriété de son élément parent.

Practice

Pratique

Quelle propriété CSS est utilisée pour contrôler le comportement de redimensionnement d’un élément ?

resize
scale
transform
change