CSS свойство resize

Свойство resizeдает возможность изменить размер элемента.

Свойство resizeконтролирует отображение и функции механизма изменения размера. Механизм изменения размера обычно представляет собой кнопку в виде треугольника, которая находится в нижнем правом углу элемента.

Свойство имеет четыре значения: "none", "both", "horizontal" и "vertical". Есть еще две значения "block" и "inline", которые находятся в экспериментальной стадии.

Свойство resize не применяется к строчным и блочным элементам, у которых свойство overflow установлено в значение "visible". Resize принимает свойство overflow только со значениями "auto", "scroll" и "hidden".
Значение по умолчанию none
Применяется К элементам, у которых свойство overflow имеет значение отличное от visible, к выборочно заменяемым элементам, которые отображают изображения или видео, а также к строчным фреймам.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис Object.style.resize = "horizontal";

Синтаксис

resize: none | both | horizontal | vertical | block | inline | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      border: 1px solid #1c87c9;
      background-color: #eee;
      padding: 10px; 
      width: 300px;
      resize: both;
      overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства resize</h2>
    <div>
      <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
      <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
    </div>
  </body>
</html>

В вышеприведенном примере размеры высоты и ширины элемента изменяются.

Рассмотрим другой пример, где размеры элемента изменяются только по вертикали:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      border: 2px solid #ccc;
      background-color: #eee;
      padding: 10px; 
      width: 300px;
      resize: vertical;
      overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства resize</h2>
    <div>
      <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
      <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
    </div>
  </body>
</html>

Пример, где можно изменить размер элемента только по горизонтали:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <div>
      <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
      <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
    </div>
  </body>
</html>

Значения

Значение Описание
none Размеры элемента не изменяются. Значение по умолчанию.
both Размеры элемента изменяются по горизонтали и по вертикали.
horizontal Размеры элемента изменяются только по горизонтали.
vertical Размеры элемента изменяются только по вертикали.
block Элемент отображает механизм, разрешающий пользователю изменить размеры элемента по блочной оси (по горизонтали или по вертикали, в зависимости от значений writing-mode и direction). Это значение находится в экспериментальной стадии.
inline Элемент отображает механизм, разрешающий пользователю изменить размеры элемента по строчной оси (по горизонтали или по вертикали, в зависимости от значений writing-mode и direction). Это значение находится в экспериментальной стадии.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
4.0+ 5.0+
4.0 -moz-
4.0+ 15.0+

Практикуйте свои знания

Какие значения может принимать CSS свойство 'resize'?
Считаете ли это полезным?