Свойство изменения размера CSS
Пример
Здесь пользователь может изменить размер как высоты, так и ширины элемента <div>:
div {
resize: both;
overflow: auto;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство resize
определяет, может ли (и как) размер элемента изменяться пользователем.
Примечание. Это resize
свойство не применяется к встроенным элементам или к блочным элементам, где overflow="visible". Итак, убедитесь, что для переполнения установлено значение «прокрутка», «автоматический» или «скрытый».
Значение по умолчанию: | никто |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.resize="оба" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -moz-, указывают на первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
Синтаксис CSS
resize: none|both|horizontal|vertical|initial|inherit;
Значения свойств
Value | Description | Play it |
---|---|---|
none | Default value. The user cannot resize the element | |
both | The user can resize both the height and width of the element | |
horizontal | The user can resize the width of the element | |
vertical | The user can resize the height of the element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Позвольте пользователю изменить размер только высоты элемента <div>:
div
{
resize: vertical;
overflow: auto;
}
Пример
Позвольте пользователю изменять только ширину элемента <div>:
div
{
resize: horizontal;
overflow: auto;
}
Пример
Во многих браузерах размер <textarea> можно изменять по умолчанию. Здесь мы использовали свойство resize, чтобы отключить возможность изменения размера:
textarea {
resize: none;
}
Связанные страницы
Учебное пособие по CSS: Пользовательский интерфейс CSS
Справочник по HTML DOM: свойство изменения размера