Propriété CSS resize
La propriété CSS resize spécifie comment l’élément peut être redimensionné. Elle contrôle l’apparence et le fonctionnement du mécanisme de redimensionnement. Ce mécanisme est généralement une poignée triangulaire située dans le coin inférieur droit de l’élément.
Cette propriété fait partie des propriétés CSS3.
Elle possède 4 valeurs : "none", "both", "horizontal" et "vertical". Il existe deux autres valeurs, "block" et "inline", qui relèvent d’une technologie expérimentale.
INFO
La propriété resize ne s’applique pas aux éléments inline ni aux éléments de bloc pour lesquels overflow est défini sur "visible". Elle n’accepte que les valeurs "auto", "scroll" et "hidden" de la propriété overflow.
| Initial Value | none |
|---|---|
| Applies to | Elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | Object.style.resize = "horizontal"; |
Syntax
CSS resize syntax
resize: none | both | horizontal | vertical | block | inline | initial | inherit;Example of the resize property with the "both" value:
CSS resize code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 1px solid #1c87c9;
background-color: #eee;
padding: 10px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>Dans l’exemple donné, la hauteur et la largeur de l’élément peuvent être redimensionnées.
Voir un autre exemple, où l’élément ne peut être redimensionné que verticalement :
Example of the resize property with the "vertical" value:
CSS resize vertically resizable example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #ccc;
background-color: #eee;
padding: 10px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>Un autre exemple où l’élément ne peut être redimensionné que horizontalement :
Example of the resize property with the "horizontal" value:
CSS resize horizontally resizable example
<!DOCTYPE html>
<html>
<head>
<title>Title of the 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>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| none | L’élément n’est pas redimensionné. C’est la valeur par défaut de cette propriété. | Play it » |
| both | L’élément est redimensionné à la fois verticalement et horizontalement. | Play it » |
| horizontal | L’élément est redimensionné uniquement horizontalement. | Play it » |
| vertical | L’élément est redimensionné uniquement verticalement. | Play it » |
| block | L’élément affiche un mécanisme permettant à l’utilisateur de le redimensionner dans la direction du bloc (horizontalement ou verticalement selon les valeurs de writing-mode et direction). Cette valeur est une technologie expérimentale. | |
| inline | L’élément affiche un mécanisme permettant à l’utilisateur de le redimensionner dans la direction inline (horizontalement ou verticalement selon les valeurs de writing-mode et direction). Cette valeur est une technologie expérimentale. | |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Play it » |
| inherit | Hérite de la propriété de son élément parent. |
Practice
Quelle propriété CSS est utilisée pour contrôler le comportement de redimensionnement d’un élément ?