CSS resize Property

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

Это свойство относится к свойствам CSS3.

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

info

Свойство resize не применяется к строчным элементам или к блочным элементам, для которых overflow задан как "visible". Оно принимает только значения "auto", "scroll" и "hidden" свойства overflow.

Initial Value	none
Applies to	Elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	Object.style.resize = "horizontal";

Синтаксис

Синтаксис CSS resize

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

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

Пример кода CSS resize

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

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

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

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

Пример свойства 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>

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

Значения

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

Practice

Практика

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

resize
scale
transform
change