CSS resize is a property that allows users to adjust the size of an element, either vertically, horizontally, both, or none, based on the specified value.
Resize property adds a handle at the bottom-right corner of an element on a webpage. This handle allows users to click and drag to change the size of an elements, making it larger or smaller according to their preference.
This chapter will cover the use of resize property.
Possible Values
- none − No user-controllable method for resizing an element is possible. This is default value.
- vertical − User can resize an element in the vertical direction.
- horizontal − User can resize an element in the horizontal direction.
- both − User can resize an element both horizontally and vertically.
- block − User can resize an element in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).
- inline − User can resize an element in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value).
The properties block and inline are supported only on Firefox and Safari browsers.
Applies to
Elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
Syntax
resize: none | vertical | horizontal| both;
CSS resize – none Value
Following example demonstrates use of CSS resize property set to none value. Here we see user is prevented from resizing the element in any direction. The resize: none is a default value.
<html><head><style>
textarea {
background-color: #e7ef0e;
color: #ee2610;
resize: none;
overflow: auto;
height: 150px;
width: 250px;
}
</style></head><body><textarea>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</textarea></body></html>CSS resize – vertical Value
Following example demonstrates use of CSS resize property set to vertical. Here we see user is allowed to resize the height of the <div> element vertically by dragging the bottom-right corner.
<html><head><style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: vertical;
overflow: auto;
height: 150px;
width: 250px;
}
</style></head><body><h3>Click and drag the bottom-right corner to change the size of an element vertically.</h3><div><h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div></body></html>CSS resize – horizontal Value
Following example demonstrates use of CSS resize property set to horizontal. Here we see user is allowed to modify the width of a <div> element horizontally by dragging the bottom-right corner.
<html><head><style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: horizontal;
overflow: auto;
height: 150px;
width: 250px;
}
</style></head><body><h3>Click and drag the bottom-right corner to change the size of an element horizontally.</h3><div><h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the internet.
</div></body></html>CSS resize – both Value
Following example demonstrates use of CSS resize property set to both. Here we see user is allowed to resize the element both horizontally and vertically.
<html><head><style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: both;
overflow: auto;
height: 150px;
width: 250px;
}
</style></head><body><h3>Click and drag the bottom-right corner to change the size of an element vertically and horizontally.</h3><div><h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div></body><html>CSS resize – inherit Value
Following example demonstrates use of CSS resize property set to inherit on a child element. Here we see it will have the same resizing behavior as its parent element.
<html><head><style>
.my-box1 {
background-color: #e7ef0e;
color: #ee2610;
resize: vertical;
overflow: auto;
height: 150px;
width: 250px;
}
.my-box2 {
resize: inherit;
}
</style></head><body><h3>Click and drag the bottom-right corner to change the size of an element.</h3><div class="my-box1"><div class="my-box2"><h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div></div></body></html>CSS resize – Arbitrary Elements
It is possible to create a resizable <div> container with a resizable <p> (paragraph) element inside it, where user can click and drag the bottom-right corner to change the size of both the container and the paragraph. Following example demonstartes this behavior.
<html><head><style>
.my-box {
background-color: #e7ef0e;
color: #ee2610;
resize: both;
overflow: scroll;
border: 2px solid black;
}
div {
height: 250px;
width: 250px;
}
p {
height: 150px;
width: 150px;
}
</style></head><body><h3>Click and drag the bottom-right corner to change the size of an element.</h3><div class="my-box"><h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2><p class="my-box"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you ar going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p></div></body></html>
Leave a Reply