resize

概述

 resize CSS 属性允许你控制一个元素的可调整大小性。

初始值none
适用元素elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
是否是继承属性否
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Global values */
resize: inherit;
resize: initial;
resize: unset;

取值

none
元素不能被用户缩放。
both
允许用户在水平和垂直方向上调整元素的大小。
horizontal
允许用户在水平方向上调整元素的大小。
vertical
允许用户在垂直方向上调整元素的大小。
block
Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.
inline
Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.
Note: 如果一个block元素的 overflow 属性被设置成了visible，那么resize属性对该元素无效。

标准语法

none | both | horizontal | vertical | block | inline

例子

Disabling resizability of textareas

CSS

<textarea> 元素在Gecko 2.0 (Firefox 4)中默认是可以进行缩放的. 你可以通过下面的CSS代码来重写这种行为：

textarea.example {
  resize: none; /* disables resizability */
}

HTML

<textarea class="example">Type some text here.</textarea>

Result

Using resize with arbitrary elements

You can use the resize property to make any element resizable. In the example below, a resizable <div> box contains a resizable paragraph (<p> element):

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

HTML

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable, because the CSS resize property is set to 'both' on this
    element.
  </p>
</div>

Result

Specifications

Specification Status Comment
CSS Logical Properties and Values Level 1
resize		 Editor's Draft Adds the values block and inline.
CSS Basic User Interface Module Level 3
resize		 Recommendation Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (on <textarea>) 1.0 4.0 (2.0)-moz 未实现 12.1 3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) 4.0 5.0 (5.0)[1] 未实现 15 4.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (on <textarea>) ? ? ? ? ?
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) ? ? ? ? ?

[1] resize doesn't have any effect on <iframe> (cf. bug 680823)

See also