resize
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
La propriété resize permet de contrôler le caractère redimensionnable d'un élément et notamment la direction dans laquelle celui-ci peut être redimensionné.
Exemple interactif
resize: both;
resize: horizontal;
resize: vertical;
resize: none;
Try resizing this element.
#example-element {
background: linear-gradient(135deg, #0ff 0%, #0ff 94%, #fff 95%);
border: 3px solid #c5c5c5;
overflow: auto;
width: 250px;
height: 250px;
font-weight: bold;
color: #000;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
Syntaxe
/* Valeurs avec un mot-clé */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
/* Valeurs globales */
resize: inherit;
resize: initial;
resize: unset;
La propriété resize peut être définie avec l'un des mots-clés suivants.
Valeurs
none-
L'élément n'offre aucune méthode à l'utilisateur pour que celui-ci le redimensionne.
both-
L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner, horizontalement et verticalement.
horizontal-
L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner horizontalement (pas de redimensionnement vertical).
vertical-
L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner verticalement (pas de redimensionnement horizontal).
blockExpérimental-
Selon les valeurs de
writing-modeetdirection, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc. inlineExpérimental-
Selon les valeurs de
writing-modeetdirection, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.
Note : resize ne s'applique pas aux blocs dont la propriété overflow vaut visible.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | é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 |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |