resize
CSS resize Property
The CSS resize property specifies how the element is resizable. It controls over the appearance and function of the resizing mechanism. The resizing mechanism is usually a triangle knob at the bottom right corner of the element.
This property is one of the CSS3 properties.
It has 4 values: “none”, “both”, “horizontal” and “vertical”. There are two other values “block” and “inline” which are experimental technology.
The resize property does not apply to inline elements or to block elements where overflow is set to “visible”. It only accepts “auto”, “scroll” and “hidden” values of the overflow property.
| 类目 | 类目 |
|---|---|
| Initial Value | none |
| Applies to | Elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | Object.style.resize = “horizontal”; |
Syntax
Syntax
resize: none | both | horizontal | vertical | block | inline | initial | inherit;
Example of the resize property with the “both” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 1px solid #1c87c9;
background-color: #eee;
padding: 10px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>
In the given example both the height and the width of the element are resizable.
See another example, where the element is resizable only vertically:
Example of the resize property with the “vertical” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #ccc;
background-color: #eee;
padding: 10px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>
Another example where the element is resizable only horizontally:
Example of the resize property with the “horizontal” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 1px solid #8ebf42;
background-color: #eee;
padding: 10px;
width: 300px;
height: 200px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| none | The element is not resized. This is the default value of this property. | Play it » |
| both | The element is resized both vertically and horizontally. | Play it » |
| horizontal | The element is resized only horizontally. | Play it » |
| vertical | The element is resized only vertically. | Play it » |
| block | The element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically depending on the writing-mode and direction value). | |
| This value is an experimental technology. | ||
| inline | The element displays a mechanism for allowing the user to resize it in the inline direction (either horizontally or vertically depending on the writing-mode and direction value). | |
| This value is an experimental technology. | ||
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |