Propriété CSS resize

La propriété CSS resize spécifie le caractère redimensionnable d'un élément.

La propriété resize contrôle l'apparence et la fonction du méchanisme de redimensionnement. Le mécanisme de redimensionnement est généralement un bouton triangulaire dans le coin inférieur droit de l'élément.

Cette propriété a 4 valeurs: "none", "both", "horizontal" et "vertical". Il y a deux autres valeurs "block" et "inline" qui sont une technologie expérimentale.

La propriété resize ne s'applique pas aux éléments en ligne (inline) ou blocs dont la propriété overflow vaut "visible". Elle n'accepte que les valeurs "auto", "scroll" et "hidden" de la propriété overflow.

Valeur initiale	none
Appliquée à	Éléments dont overflow ne vaut pas visible et éventuellement les éléments remplacés qui représentent des images, des vidéos ou des iframes.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	Object.style.resize = "horizontal";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      border: 1px solid #1c87c9;
      background-color: #eee;
      padding: 10px; 
      width: 300px;
      resize: both;
      overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété resize</h2>
    <div>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. </p>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.</p>
    </div>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, la hauteur et la largeur de l'élément, les deux sont redimensionnbales.

Voyez un autre exemple, dans lequel l'élément n'est redimensionnable que verticalement:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      border: 2px solid #ccc;
      background-color: #eee;
      padding: 10px; 
      width: 300px;
      resize: vertical;
      overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété resize</h2>
    <div>
      <p>Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. </p>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.</p>
    </div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple, dans lequel l'élément n'est redimensionnable que horizontalement:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété resize</h2>
    <div>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. </p>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.</p>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	L'élément n'est pas redimensionné. C'est la valeur initiale de cette propriété.
both	L'élément est redimensionné à la fois verticalement et horizontalement.
horizontal	L'élément n'est redimensionné que horizontalement.
vertical	L'élément n'est redimensionné que verticalement.
block	L'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner dans la direction du bloc (horizontalement ou verticalement en fonction des valeurs writing-mode et direction). Cette valeur est une technologie expérimentale.
inline	L'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner dans la direction en ligne (inline) (horizontalement ou verticalement en fonction des valeurs writing-mode et direction). Cette valeur est une technologie expérimentale.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.