How to specify a division element should be resizable in CSS ?
Last Updated :
17 May, 2023
In this article, we will learn how to specify that a division element should be resizable by the user using CSS.
Approach: The resize property is used to define if an element is resizable by the user. It can be specified with three values to denote that an element is resizable, that is, horizontal, vertical, and both. It is set to none by default. We can specify any of these values to make the division resizable as per the requirement. Additionally, the overflow property has to be set to auto so that the resize behaves correctly.
Syntax:
.resizable {
/* Enable resize on both
horizontal and vertical */
resize: both;
}
Example: In this example, we are using the above-explained method.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
text-align: center;
font-size: 20px;
}
.container {
display: flex;
height: 500px;
}
.resize-both,
.resize-hor,
.resize-ver {
border: 5px green double;
padding: 20px;
width: 200px;
height: 200px;
margin: 16px;
/* Set overflow to auto */
overflow: auto;
}
.resize-both {
/* Enable resize on both
horizontal and vertical */
resize: both;
}
.resize-hor {
/* Enable resize on
horizontal */
resize: horizontal;
}
.resize-ver {
/* Enable resize on
vertical */
resize: vertical;
}
</ style >
</ head >
< body >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< div class = "container" >
< div class = "resize-both" >
This division can be resized
in both directions
</ div >
< div class = "resize-hor" >
This division can be
resized horizontally
</ div >
< div class = "resize-ver" >
This division can be
resized vertically
</ div >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...