css властивість resize
Властивість resize вказує, чи дозволено користувачу змінювати розміри елемента.
Ви можете вказати, чи може користувач змінювати розмір елемента по горизонталі, вертикалі, в обох напрямках або взагалі заборонити таку можливість.
Властивість resize не слід плутати з властивістю overflow, що дозволяє вказати, що має відбутися, якщо вміст елемента занадто великий, щоб він містився всередині поля. У цьому випадку ви можете вказати, що в полі має з'являтися смуга прокрутки, приховувати вміст або що вміст не слід обрізати (тобто він повинен з'явитися поза рамкою). Однак це не те ж саме, що і властивість зміни розміру, що дозволяє користувачеві змінювати розмір блоку.
- Нотатка
-
Властивість
автор: Svitlanaresizeне застосовується до блоків, де для властивістіoverflowвстановленоvisible. Враховуючи, що це значення без задання для цього ресурсу, вам потрібно переконатися, що дляoverflowвстановлено значення відмінне відvisible(наприклад,scrollчиauto).
Синтаксис
resize: none|both|horizontal|vertical|initial|inherit;Властивість resize може отримувати 6 значень:
-
none -
Розміри елемента не змінюються.
автор: Svitlana -
both -
Можна змінювати розміри елемента по горизонталі та вертикалі.
автор: Svitlana -
horizontal -
Можна змінювати розміри елемента тільки по горизонталі.
автор: Svitlana -
vertical -
Можна змінювати розміри елемента тільки по вертикалі.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання.
автор: Svitlana -
inherit -
Успадкує значення від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.resize="both" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 4 | 3 | 12.1 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4–79 | — |
Приклади
+ запропонувати свій приклад у пісочниці
Потягни за правий нижній кут блока — resize: both дозволяє міняти і ширину, і висоту. Обов'язковий супутник — overflow зі значенням, відмінним від visible.
HTML
<div>Потягни за мій правий нижній кут.</div>CSS
div {
resize: both;
overflow: auto;
width: 220px;
height: 90px;
padding: 8px;
border: 2px solid #0172ad;
}Значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!