CSS-свойство resize

CSS-свойство resize управляет тем, может ли пользователь изменять размер элемента путём перетаскивания, и в каком направлении. Когда изменение размера включено, браузер отображает небольшой маркер перетаскивания (обычно треугольный) в правом нижнем углу элемента, позволяя посетителям самостоятельно растягивать или сжимать блок.

Это свойство входит в состав свойств CSS3. Наиболее знакомый пример — элемент <textarea>, который по умолчанию поддерживает изменение размера в большинстве браузеров. С помощью resize можно распространить такое поведение на другие блоки — или отключить его для <textarea>, если свободное изменение размеров нарушает компоновку.

Четыре стандартных значения: none, both, horizontal и vertical. Два дополнительных значения — block и inline — изменяют размер относительно направления письма и считаются экспериментальными.

Информация

resize действует только тогда, когда элемент способен обрезать собственное содержимое. Свойство игнорируется для строчных элементов и для любых элементов, у которых overflow равен visible (значение по умолчанию). Чтобы resize работало для обычного блока, например <div>, установите overflow в auto, scroll или hidden. Для <textarea> это не требуется, поскольку он уже создаёт собственный контейнер прокрутки.

Начальное значение	none
Применяется к	Элементам с overflow, отличным от visible, и опционально к замещаемым элементам, представляющим изображения или видео, а также iframe.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS3
DOM-синтаксис	Object.style.resize = "horizontal";

Синтаксис

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

Сочетайте resize с overflow и разумными начальными значениями width/height, чтобы блок имел определённый размер, от которого можно отталкиваться. Также рекомендуется использовать min-width/max-width (или их аналоги для высоты), чтобы ограничить размеры блока разумными пределами.

Пример свойства resize со значением "both"

<!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>

Попробуйте сами »

Здесь высота и ширина <div> поддерживают перетаскивание, поскольку resize: both сочетается с overflow: auto. Удалите строку с overflow — и маркер перетаскивания исчезнет. Это наиболее распространённая причина, по которой resize «не работает».

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

Пример свойства resize со значением "vertical"

Пример вертикального изменения размера с помощью CSS resize

<!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>

Попробуйте сами »

Ещё один пример, где элемент можно изменять только по горизонтали:

Пример свойства resize со значением "horizontal"

Пример горизонтального изменения размера с помощью CSS resize

<!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>

Попробуйте сами »

Отключение изменения размера у textarea

Очень распространённый практический случай — противоположность приведённых выше примеров: отключение стандартного маркера перетаскивания у <textarea>, чтобы пользователи не могли нарушить макет фиксированной ширины. Установите resize: none (или resize: vertical, если хотите разрешить изменение только высоты):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea {
        width: 300px;
        height: 100px;
        /* allow the box to grow taller, but never wider */
        resize: vertical;
      }
    </style>
  </head>
  <body>
    <h2>Comment</h2>
    <textarea placeholder="Type your message..."></textarea>
  </body>
</html>

Когда использовать

Textarea: повседневный случай. Используйте resize: vertical, чтобы пользователи могли удлинить поле для комментария, не искажая ширину формы, или resize: none, чтобы полностью заблокировать изменение размера.
Изменяемые панели и превью: редакторы кода, сравнение изображений и окна чата позволяют пользователям перетаскивать блок до удобного размера.
Избегайте для критичных элементов макета: если перетаскивание элемента может непредсказуемо перекрыть или сдвинуть другой контент, оставьте resize в значении none.

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

Значения

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

Практика

Какое CSS-свойство используется для управления поведением изменения размера элемента?

resizescaletransformchange