none: The user is not able to resize the element. It is a default value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
.gfg{
border: 2px solid green;
padding: 25px;
width: 300px;
resize: none;
overflow: auto;
}
h1, h2 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>resize: none;</h2>
<div class="gfg">
<h2 style="color:red;">Sudo Placement</h2>
<h3>Course Overview</h3>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</p>
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</center>
</body>
</html>
|
Output:
both: The element should be resized on both sides i.e. height and width.
Example:
<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
.gfg{
border: 2px solid green;
padding: 25px;
width: 300px;
resize: both;
overflow: auto;
}
h1, h2 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>resize:both;</h2>
<div class="gfg">
<h2 style="color:red;">Sudo Placement</h2>
<h3>Course Overview</h3>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</p>
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</center>
</body>
</html>
|
Output:
horizontal: It is used to resize only the width of the element by the user.
Example:
<!DOCTYPE html>
<html>
<head>
<title>tesize property</title>
<style>
.gfg{
border: 2px solid green;
padding: 25px;
width: 300px;
resize: horizontal;
overflow: auto;
}
h1, h2 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>resize:horizontal;</h2>
<div class="gfg">
<h2 style="color:red;">Sudo Placement</h2>
<h3>Course Overview</h3>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</p>
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</center>
</body>
</html>
|
Output:
vertical: It is only used to resize the height of the element according to the requirement of user.
Example:
<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
.gfg{
border: 2px solid green;
padding: 25px;
width: 300px;
resize: vertical;
overflow: auto;
}
h1, h2 {
color: green;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForGeeks</h1>
<h2 style="color:green;">resize:vertical;</h2>
<div class="gfg">
<h2 style="color:red;">Sudo Placement</h2>
<h3>Course Overview</h3>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</p>
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</center>
</body>
</html>
|
Output:
initial: It sets the Property to its default value.It is same as none property.
Example;
<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
.gfg{
border: 2px solid green;
padding: 25px;
width: 300px;
resize: initial;
overflow: auto;
}
h1, h2 {
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>resize:initial;</h2>
<div class="gfg">
<h2 style="color:red;">Sudo Placement</h2>
<h3>Course Overview</h3>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</p>
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</center>
</body>
</html>
|
Output:
Supported Browsers: the browsers supported by resize Property are listed below:
- Google Chrome 1
- Edge 79
- Firefox 4
- Opera 12.1
- Safari 3
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!