Медиа

Медиа

Фигуры

square

round

cover

Соотношение сторон

cover + 16-9

Встроенный документ

Iframe заполняет свою область, поэтому область определяет размер: модификатор соотношения, или media--fill для того, чтобы занять любую высоту, которую дает родитель.

media--fill · actions

16-9

Накладка

media--bg / media--fg

Vue

Та же рамка, что и в частичном представлении vue, для документа, адрес которого известен только во время выполнения страницы.

Рамка

Картина в рамке, с сервера с media() или как компонент media vue: ссылка, когда она куда-то ведет, подпись внизу и свечение во время загрузки или когда изображения нет.
Подпись внизу

media() · href · caption

media(null) · placeholder

Мозаика

Картины разной высоты, упакованные рядом без пробелов, каждая такой высоты, какой требует её соотношение, количество колонн зависит от размера комнаты: wall() рисует её с сервера, форма — css/shapes/wall.

Стена коллекции

Та же стена, что и коллекция сущностей, считываемая из api по одной странице за раз при прокрутке: следующая страница появляется до того, как будет достигнут конец стены.

Обрезка

Какую часть изображения сохранить, выбирая её на изображении: область перемещается, угол изменяет размер, стрелки перемещают её, а с Shift — изменяют размер. Это определяется собственными пикселями изображения — по которым сервер обрезает — и crop() обрезает её здесь, когда обрезка отправляется. Соотношение удерживает её (1 для портрета, отображается круглым), или оно свободно, как требуется для подписи.