CSS | resize Property
The resize property in CSS is used to resize the element according to user requirement. It does not apply to inline elements or to block elements where overflow is visible.
Syntax:
resize: none|both|horizontal|vertical|initial;
Property value:
- none
- both
- horizontal
- vertical
- initial
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
- HTML | DOM Style resize Property
- Node Jimp | resize
- Resize image proportionally with CSS
- How to auto-resize an image to fit a div container using CSS?
- Resize an iframe based on the content
- CSS | transition-property Property
- CSS | all Property
- CSS | right Property
- CSS | top Property
- CSS | grid-gap Property
- CSS | border-right Property
- CSS | transform Property
- CSS overflow-y Property
- CSS | clip Property
- Web API | DOMRectReadOnly x property
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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
Output:
Supported Browsers: the browsers supported by resize Property are listed below:
Recommended Posts:
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
