CSS | resize Property
The resize property in CSS is used to resize the element according to user requirement. It does not applied to inline elements or to block elements where overflow is visible.
Syntax:
resize: none|both|horizontal|vertical|initial;
Property:
- none
- both
- horizontal
- vertical
- initial
- Resize image proportionally with CSS
- How to auto-resize an image to fit a div container using CSS?
- CSS | transition-property Property
- CSS | right Property
- CSS | top Property
- CSS | all Property
- CSS | column-gap Property
- CSS | animation-name Property
- CSS | grid-row-end Property
- CSS | left Property
- CSS | Display property
- CSS | perspective Property
- CSS | min-height Property
- CSS | transition Property
- CSS | margin-right 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:
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.