Соотношение сторон
Aspect ratio держит заданную пропорцию и растягивает на неё дочерний элемент, поэтому медиа занимает своё место ещё до загрузки и страница не прыгает.
<tk-aspect-ratio ratio="16/9" style="max-inline-size: 320px"> <tk-skeleton shape="rect"></tk-skeleton> </tk-aspect-ratio>
Анатомия
| Часть | Что это |
|---|---|
tk-aspect-ratio |
сам блок; ничего не рисует и обрезает то, что выходит за край |
| слот по умолчанию | один прямой потомок, который заполняет блок |
Пропорции
<div style="display: flex; gap: var(--space-16); align-items: start"> <tk-aspect-ratio ratio="1/1" style="inline-size: 96px"><tk-skeleton shape="rect"></tk-skeleton></tk-aspect-ratio> <tk-aspect-ratio ratio="16/9" style="inline-size: 96px"><tk-skeleton shape="rect"></tk-skeleton></tk-aspect-ratio> <tk-aspect-ratio ratio="4/3" style="inline-size: 96px"><tk-skeleton shape="rect"></tk-skeleton></tk-aspect-ratio> <tk-aspect-ratio ratio="3/4" style="inline-size: 96px"><tk-skeleton shape="rect"></tk-skeleton></tk-aspect-ratio> <tk-aspect-ratio ratio="3/2" style="inline-size: 96px"><tk-skeleton shape="rect"></tk-skeleton></tk-aspect-ratio> </div>
ratio |
Где обычно |
|---|---|
1/1 |
аватары, миниатюры, плитки |
16/9 (по умолчанию) |
главное изображение, видео, карточки |
4/3 |
классические фото |
3/4 |
вертикальные карточки, обложки |
3/2 |
редакционные фото |
Неизвестное значение превращается в 16/9.
Другие пропорции
Для пропорции вне набора, например 21:9 или 9:16, задайте --tk-aspect-ratio значением
CSS aspect-ratio. Оно важнее, чем ratio.
<tk-aspect-ratio style="--tk-aspect-ratio: 21 / 9; max-inline-size: 320px"> <tk-skeleton shape="rect"></tk-skeleton> </tk-aspect-ratio>
Размер и заполнение
Задайте ширину блока, например колонкой, ячейкой grid или max-inline-size. Высота
следует из пропорции. Если задать height самим, он важнее пропорции.
Дочерний элемент заполняет блок без классов и обёрток. Он должен быть прямым
потомком: элемент внутри обёртки <div> сохраняет свой размер и блок не заполняет.
<tk-aspect-ratio ratio="16/9"> <tk-image src="/photos/skyline.jpg" alt="A city skyline at dusk"></tk-image> </tk-aspect-ratio>
Чтобы скруглить или обрезать медиа, оформляйте сам дочерний элемент или задайте
--tk-image-radius у
Когда использовать
- Оборачивайте им медиа:
Image , видео, карту, встроенный виджет, чтобы место было занято до загрузки. - Подходит для любого одного элемента, который должен держать пропорцию, например
Skeleton или цветной плашки. - Для разового случая вне медиа хватит обычного CSS
aspect-ratio. - Это не изображение (нет
srcиalt; для этого естьImage ) и не сетка раскладки.
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
| Оборачивать медиа, чтобы заранее занять место | Позволять странице прыгать при загрузке картинки |
| Класть дочерний элемент прямо внутрь | Оборачивать его в <div> |
--tk-aspect-ratio для пропорции вне набора |
Растягивать готовую пропорцию фиксированной высотой |
| Скруглять углы у дочернего элемента | Ждать, что блок нарисует рамку |
Связанные
Image : изображение, под которое блок занимает место.Skeleton : заглушка, которая заполняет блок, пока грузится содержимое.
API
Атрибуты
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
ratio |
16/9 | 1/1 | 4/3 | 3/4 | 3/2 |
16/9 |
пропорция блока; неизвестное значение превращается в 16/9 |
Слоты
| Слот | Содержимое |
|---|---|
| по умолчанию | один элемент, который заполняет блок |
События
Нет.
CSS
--tk-aspect-ratio: любое значение CSSaspect-ratio, например21 / 9; оно важнее, чемratio.
Токены
ratio |
Токен |
|---|---|
1/1 |
aspect-ratio/1-1 |
16/9 |
aspect-ratio/16-9 |
4/3 |
aspect-ratio/4-3 |
3/4 |
aspect-ratio/3-4 |
3/2 |
aspect-ratio/3-2 |
Подробнее в
Доступность
Для вспомогательных технологий блок ничего не добавляет: ни роли, ни имени, ни фокуса.
Весь смысл несёт дочерний элемент, например alt у изображения.