Propriété de redimensionnement CSS
Exemple
Ici, l'utilisateur peut redimensionner à la fois la hauteur et la largeur d'un élément <div> :
div {
resize: both;
overflow: auto;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La resize
propriété définit si (et comment) un élément est redimensionnable par l'utilisateur.
Remarque : La resize
propriété ne s'applique pas aux éléments en ligne ou aux éléments de bloc où overflow="visible". Assurez-vous donc que le débordement est défini sur "défilement", "auto" ou "masqué".
Valeur par défaut: | rien |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.resize="les deux" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
Syntaxe CSS
resize: none|both|horizontal|vertical|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
none | Default value. The user cannot resize the element | |
both | The user can resize both the height and width of the element | |
horizontal | The user can resize the width of the element | |
vertical | The user can resize the height of the element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Laissez l'utilisateur redimensionner uniquement la hauteur d'un élément <div> :
div
{
resize: vertical;
overflow: auto;
}
Exemple
Laissez l'utilisateur redimensionner uniquement la largeur d'un élément <div> :
div
{
resize: horizontal;
overflow: auto;
}
Exemple
Dans de nombreux navigateurs, <textarea> est redimensionnable par défaut. Ici, nous avons utilisé la propriété resize pour désactiver le redimensionnement :
textarea {
resize: none;
}
Pages connexes
Tutoriel CSS : interface utilisateur CSS
Référence HTML DOM : propriété de redimensionnement