Свойство CSS resize
Свойство 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 используется для управления поведением изменения размера элемента?