CSS - Resize

Previous
Next

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>
Print Page
Previous
Next
Advertisements