CSS - Изменение размера: Дайте пользователям контроль над размерами элементов

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

Что такое CSS-свойство Resize?

Прежде чем мы углубимся в детали, начнем с простого вопроса: Вы когда-нибудь замечали те маленькие ручки в правом нижнем углу некоторых текстовых полей, которые позволяют вам изменять их размер? Это и есть действие свойства resize!

CSS-свойство resize позволяет элементам быть масштабируемыми пользователем. Это как дать вашим пользователям迷你-ручку для изменения размера определенных элементов на вашей веб-странице. Круто, правда?

Применяется к

Теперь вы можете задаться вопросом: "Могу ли я сделать все на моей веб-странице масштабируемыми?" Ну, не совсем. Свойство resize в основном применяется к элементам, у которых overflow установлен не на visible. Обычно это включает:

• <textarea> элементы
• Элементы с overflow: auto или overflow: scroll

Но не волнуйтесь, мы также разберем, как сделать другие элементы масштабируемыми!

Синтаксис

Давайте разберем синтаксис использования свойства resize:

element {
resize: value;
}

Просто, не так ли? Теперь давайте рассмотрим различные значения, которые мы можем использовать.

Значения CSS Resize

Вот таблица, резюмирующая все возможные значения свойства resize:

Значение	Описание
none	Элемент не масштабируем
vertical	Элемент масштабируем по вертик.
horizontal	Элемент масштабируем по горизонтали
both	Элемент масштабируем по вертик. и horiz.
inherit	Наследует значение от родительского элемента

Теперь давайте углубимся в каждое из этих значений с了一些 примерами!

CSS resize - none Значение

textarea {
resize: none;
}

Этот код говорит браузеру: "Эй, не позволяй никому изменять размер этого текстового поля!" Это как повесить на элемент табличку "Не трогать".

CSS resize - vertical Значение

textarea {
resize: vertical;
height: 100px;
width: 200px;
}

С этим кодом, ваше текстовое поле начинается с высоты 100px и ширины 200px, но пользователи могут тащить его, чтобы сделать его выше или ниже. Это как иметь лифт для вашего текста!

CSS resize - horizontal Значение

div {
resize: horizontal;
overflow: auto;
width: 200px;
height: 100px;
border: 2px solid blue;
}

Здесь мы применяем resize: horizontal к div. Помните, для не-текстовых полей, мы должны установить overflow на что-то другое, кроме visible. Пользователи теперь могут изменять ширину этого div, как растягивая резинку!

CSS resize - both Значение

textarea {
resize: both;
min-height: 100px;
max-height: 300px;
min-width: 200px;
max-width: 400px;
}

Это ultimate гибкость! Пользователи могут изменять размер текстового поля в любом направлении, но мы установили некоторые ограничения, чтобы предотвратить его太小 или слишком большим. Это как дать вашим пользователям песочницу для игры, но с заборами, чтобы держать все под контролем.

CSS resize - inherit Значение

.parent {
resize: both;
overflow: auto;
}

.child {
resize: inherit;
}

Здесь элемент-потомок унаследует поведение изменения размера от своего родителя. Это как передавать семейную реликвию, но для изменения размера!

CSS resize - Случайные элементы

Теперь давайте немного поиграем. Что, если мы хотим сделать обычный div масштабируемым?

.resizable-div {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #00f;
overflow: auto;
resize: both;
}

<div class="resizable-div">
<p>Я масштабируемый div! Попробуйте изменить мой размер!</p>
</div>

Установив overflow: auto и resize: both, мы превратили обычный div в масштабируемую игровую площадку! Это как дать вашим HTML-элементам суперсилы.

Заключение

И вот мы и добрались до конца, друзья! Мы исследовали чудесный мир CSS-свойства resize. От блокировки элементов с resize: none до создания полностью гибких компонентов с resize: both, вы теперь имеете власть контролировать, как пользователи взаимодействуют с размерами элементов на вашей веб-странице.

Помните, с великой властью приходит великая ответственность. Используйте свойство resize wisely, чтобы улучшить пользовательский опыт, а не сбить с толку или разочаровать ваших посетителей.

Продолжая ваше путешествие в веб-разработке, продолжайте экспериментировать с различными CSS-свойствами. Кто знает? Вы можете обнаружить новый любимый трюк, чтобы добавить в ваш арсенал кодирования!

Счастливого кодирования, и пусть ваши элементы всегда будут идеально sized!

Credits: Image by storyset