Definition of CSS Resize
CSS Resize property is defined as in-built property and allows a developermaking CSS elements to resize according to user requirements and this is done with height and width change of the specific element. Resizing is performed by dragging their bottom right corner or Called as draggable handle (a little UI handler) in most of the cases to enlarge the image in a website and specifies the axis of the resizability. And the element should follow overflow property in CSS rather than visible which is organized as an initial element.
Syntax and Parameters
Resize Syntax is given as:
. element {
Overflow: auto;
Resize: value;
}Sample Code:
text area {
resize: none;
}The properties of the value are given as follows,
- none: No change in the element, it means that no resize action is performed. And it’s an initial value for most of the elements.
- Horizontal: Here the width of an element is resized respectively.
- Height: here the height of an element is resized.
- both: This value performs both the height and the width.
- initial: Making the property to a default value.
How to Resize Property Works in CSS?
The working process is very simple such that it makes use of the in-built property but with limited functionality. The resize property act along with the overflow value which should not be set to ‘visible’. We can set to either auto or scroll. As I said before it uses handler a stylish dragger to move at the right corner of the box but nothing can be done with the left or top side. To resize the handle on the border it is important to have a width-resize. So, let’s get started, to resize an element the basic thing is to expand an element wider it means we are supposed to click and drag to the size we need which directly seeks the help of the mouse cursor to change my pointer to the right. So, this can be handled by vertical by setting the width property to ‘0’.
#resize {
--resizable-width: 400px;
height: 150vh;
width: var(--resizable-width);
background-color: red;
}And most of our code has CSS included for most of the browsers and if other browsers are used, they need some pick up to give a design, therefore CSS makes little comfort.
Note: It is obvious that when we resize an element this affects the layout, to overcome this case positioning is given. And they are not applied to inline elements.
Examples of CSS Resize
Here let’s see some implementation of resize property values in different cases.
Example #1 – Example using the value ‘both’
Here the resize property is set to both, which takes both the width and height to expand at the corner of the element.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 21px;
width: 400px;
color : green;
resize: both;
overflow: auto;
}
h1 {color : red;}
</style>
</head>
<body>
<h1>Example on Resize Property</h1>
<div>
<p>So this Box content makes the user to resize both height and width of this element. </p>
<p>To check with, drag the border at the bottom of the element. </p>
</div>
<p><b>End:</b>This property is not supported by the browser like Edge. </p>
</body>
</html>Output:
Example #2 – Demo on the resize value ‘initial’
Here the resize value is set to initial means it sets a default value.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Demo on resize property</title>
<style>
.resiz{
border: 3px solid blue;
padding: 23px;
width: 400px;
resize: initial;
overflow: auto;
}
h1, h2 {
color: orange;
}
</style>
</head>
<body>
<center>
<h1>EDUCBA - ONLINE COURSE</h1>
<h2>Resizing Both the sides</h2>
<div class="resize">
<h2 style="color:green;">Course</h2>
<h3>Course Overview</h3>
<p>
Its a Training and certification on Cloud Skills where we get a class training and digital training.
</p>
<p>
The course focuses on AWS service and intended for individuals who are into leading paths.
</p>
</div>
</center>
</body>
</html>Output:
Example #3 – Using Resize Property in the Text Area
In the example below, we have used CSS property on text area by not resizing.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS resize property</title>
<style>
textarea {
resize: none;
}
div {
resize: both;
overflow: auto;
width: 400px;
height: 200px;
border: 2px solid yellow;
}
</style>
</head>
<body>
<h2>hello World</h2>
<form>
<textarea>The resizability of this text area disabled</textarea>
</form>
<h2>Resizable div element</h2>
<div>Demo shows by dragging the right corner of the text area for the adjustment.</div>
<p><strong>Note:</strong>This property goes well with Chrome and Firefox browsers..</p>
</body>
</html>Output:
Example #4 – Using Horizontal Value in Resizing Property
Code:
<!DOCTYPE html>
<html>
<head>
<title>Resize property - Horizontal</title>
<style>
.hori{
border: 3px ridge green;
padding: 22px;
width: 250px;
resize: horizontal;
overflow: auto;
}
h1, h2 {
color: brown;
}
</style>
</head>
<body>
<center>
<h1>Resize property - Horizontal</h1>
<h2> EDUCBA;</h2>
<div class="hori">
<h2 style="color:red;">Overview of the site</h2>
<h3>World’s Largest Web Development Portal</h3>
<p>
You can get web certificates and this is well optimized for learning and also simplifies learning methodologies.
</p>
<p>
Here the CSS resize property is to fit a content in a html element and this property can be expanded or shrink in the container.Demo in a paragraph
</p>
</div>
</center>
</body>
</html>The above code says that when you click on the bottom right corner the draggable handler is expanded along the width in the cursor position.
Output:
Example #5 – Using a value ‘vertical’
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px groove;
padding: 22px;
width: 250px;
resize: vertical;
overflow: auto;
color : green;
}
p { color : blue;}
</style>
</head>
<body>
<p><b>Note:</b> The Resizable element here is a paragraph content.</p>
<div>Let the user drag the cursor pointer and the image is resized using CSS width it expands vertically.</div>
</body>
</html>Output:
Conclusion
Therefore, here we have seen a well-organized and easy to understand the concept of resizing property with examples on HTML and CSS. And we have seen how these elements shrink and expand in action by the resize handler. You can also make images resizable by setting max-width and height.
Recommended Articles
This is a guide to CSS Resize. Here we also discuss the definition and how to resize property works in css? along with a different example and its code implementation. You may also have a look at the following articles to learn more –
