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	Значение элемента наследуется от родительского элемента.