Home » CSS

The resize Property in CSS

CSS | resize Property: Here, we are going to learn about the resize property with its syntax, examples in CSS (Cascading Style Sheets).
Submitted by Anjali Singh, on January 10, 2020

CSS | resize Property

Starting note:

We deal with various elements regularly while we are developing a website or a web page and to organize, edit and format those elements is a very crucial task as those elements are the basic building blocks of our website.

So how as we all know there are numerous ways to style the elements of a web page or to change the functionality of those elements? This section is all about discussing one such property known as resize property in CSS.

Definition:

The resize property in CSS is used to resize the size of the element according to the user's need and also in which directions. The resize property can take 4 values.

Syntax:

    Element{
        Resize : none|both|vertical|horizontal;
    }

Let's look at each property...

1) resize : none

none value is applied to the resize property when the user doesn't want to resize the element. It is also the default value.

Syntax:

    Element{
        resize:none;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: none;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <div>
        <p>None value doesn’t allow resizing of this div element.</p>
    </div>
</body>

</html>

Output

CSS | resize Property | Example 1

In the above example, you cannot resize the div element. It is static.

2) resize : both

both value is applied to the resize property when the user wants its element to be resizable on both sides that is width and height.

Syntax:

    Element{
        resize:both;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: both;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <div>
        <p>click and drag the bottom right corner to resize the height and width of this div element.</p>
    </div>
</body>

</html>

Output

CSS | resize Property | Example 2

In the above example, to resize click and drag the bottom right corner of this div element.

3) resize : vertical

vertical value is applied to the resize property when the user wants to resize the height of the element according to its need.

Syntax:

    Element{
        resize:vertical;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: vertical;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <div>
        <p>click and drag the bottom right corner to resize the height of this div element.</p>
    </div>
</body>

</html>

Output

CSS | resize Property | Example 3

In the above example, the user can click and drag the bottom right corner of this div element to resize its height.

4) resize : horizontal

horizontal value is applied to the resize property when the user wants to resize the width of the element according to its need.

Syntax:

    Element{
        resize:horizontal;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: horizontal;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <div>
        <p>click and drag the bottom right corner to resize the width of this div element.</p>
    </div>
</body>

</html>

Output

CSS | resize Property | Example 4

In the above example, the user can click and drag the bottom right corner of this div element to resize its width.






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.