# 9-сегментное масштабирование

URL: https://chugunov.pro/glossary/frontend/9-segmentnoe-masshtabirovanie/
Оригинальное название: 9-slice scaling
Раздел: [Frontend](https://chugunov.pro/glossary/frontend/)
Обновлено: 28.07.2026.
Источник: глоссарий веб-разработки chugunov.pro.

## Коротко

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

## Что такое «9-сегментное масштабирование»

Способ растягивания графического элемента, при котором углы сохраняют размер, края растягиваются по одной оси, а центр заполняет оставшуюся область. Изображение мысленно делится на девять частей сеткой из двух горизонтальных и двух вертикальных линий, и каждая часть масштабируется по своим правилам. Приём незаменим для кнопок, панелей и рамок с закруглёнными или узорчатыми краями: они держат форму при любой ширине и высоте без искажения углов. В вебе тот же принцип реализует CSS-свойство `border-image`, а в игровых движках и UI-редакторах он известен как 9-patch.

## Связанные термины

- [Жест масштабирования](https://chugunov.pro/glossary/frontend/zhest-masshtabirovaniia/) — Касание двумя пальцами, расстояние между которыми меняют для увеличения или уменьшения содержимого.
- [Масштабирование](https://chugunov.pro/glossary/frontend/masshtabirovanie/) — Геометрическое увеличение или уменьшение элемента относительно исходных размеров.
- [Область просмотра](https://chugunov.pro/glossary/frontend/oblast-prosmotra/) — Видимая часть веб-страницы в окне браузера или на экране устройства.
- [CSS-трансформация](https://chugunov.pro/glossary/frontend/css-transformatsiia/) — Изменение координатной системы элемента для перемещения, масштабирования, поворота или наклона без перестройки потока.
- [Граница элемента](https://chugunov.pro/glossary/frontend/granitsa-elementa/) — Линия вокруг области содержимого и внутренних отступов элемента, для которой задаются толщина, стиль и цвет.
- [Набор CSS-правил](https://chugunov.pro/glossary/frontend/nabor-css-pravil/) — Селектор вместе с блоком деклараций, определяющих оформление выбранных элементов.
- [Пользовательские свойства CSS](https://chugunov.pro/glossary/frontend/pol-zovatel-skie-svoistva-css/) — Переменные, объявляемые в CSS с именем вида --name и используемые через функцию var() для повторного применения значений.
- [Скругление углов](https://chugunov.pro/glossary/frontend/skruglenie-uglov/) — CSS-свойство, позволяющее сделать углы рамки элемента закруглёнными или эллиптическими. `border-radius` принимает как одно значение для всех углов, так и разные для каждого.