Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété resize

Description de la propriété resize.

resize autorise ou non le dimensionnement d'un élément par l'utilisateur.

Remarque : pour que resize soit pris en compte, la propriété overflow doit avoir la valeur auto, scroll ou hidden.

D'autre part, si la largeur ou la hauteur (ou les deux) sont définies avec le mot clé !important, la propriété resize ne pourra pas autoriser le dimensionnement suivant cet axe. Sur l'exemple ci-dessous, la propriété resize n'aura aucun effet.

width:200px !important; height:100px !important; overflow:hidden; resize:both;

Les quatre propriétés min-width, max-width, min-height et max-height permettent de limiter le dimensionnement de l'élément.

Lorsque l'utilisateur modifie les dimensions de l'élément, les propriétés width et height sont mises à jour avec une valeur exprimée en pixels. Si initialement ces propriétés avaient une valeur relative, en pourcentages par exemple, le calcul en relatif ne se fera plus.

Valeurs pour resize.

  • resize: none;
    Exemple pour resize:none

    Valeur par défaut. L'utilisateur ne peut pas redimensionner l'élément.

  • resize: horizontal;
    Exemple pour resize:horizontal

    L'utilisateur peut modifier la largeur de l'élément.

  • resize: vertical;
    Exemple pour resize:vertical

    L'utilisateur peut modifier la hauteur de l'élément.

  • resize: both;
    Exemple pour resize:both

    L'utilisateur peut modifier aussi bien la largeur que la hauteur de l'élément.

  • resize: block;

    L'utilisateur peut modifier la dimension de l'élément, suivant l'axe block Cette valeur est équivalente à vertical pour les langues européennes, qui s'écrivent horizontalement.

  • resize: inline;

    L'utilisateur peut modifier la dimension de l'élément, suivant l'axe inline Cette valeur est équivalente à horizontal pour les langues européennes, qui s'écrivent horizontalement.

  • resize: initial;

    La valeur initiale est none.

  • resize: unset; resize: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

resize :
Ce cadre peut être redimensionné, ou pas, suivant la valeur choisie pour resize.