| CARVIEW |
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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;
<section class="default-example" id="default-example">
<div id="example-element">Try resizing this element.</div>
</section>
#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 |
Syntaxe formelle
resize =
none |
both |
horizontal |
vertical |
block |
inline
Exemples
Désactiver le redimensionnement des éléments textarea
CSS
Par défaut, les éléments <textarea> peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment CSS :
textarea.exemple {
resize: none;
}
HTML
<textarea class="exemple">Saisir du texte ici.</textarea>
Résultat
Utiliser resize sur des éléments quelconques
La propriété resize peut être utilisée afin de pouvoir redimensionner n'importe quel élément. Dans l'exemple qui suit, on a une boîte <div> redimensionnable qui contient un paragraphe ((<p>) lui-même redimensionnable) :
CSS
.redimensionnable {
resize: both;
overflow: scroll;
border: 1px solid black;
}
div {
height: 300px;
width: 300px;
}
p {
height: 200px;
width: 200px;
}
HTML
<div class="redimensionnable">
<p class="redimensionnable">
Ce paragraphe peut être redimensionné car la propriété CSS resize vaut
'both' sur cet élément.
</p>
</div>
Résultat
Spécifications
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # resize |
Compatibilité des navigateurs
Loading…