CSS – выравнивание содержимого (удаление пробелов) после преобразования: масштаб ⇐ CSS

[Anonymous]

Пока я нашел только очень сложное или очень «хакерское» решение приведенной ниже проблемы:

Что у меня есть до трансформации

.element1 { высота: 100 пикселей; ширина: 100 пикселей; цвет фона: красный; } .element2 { высота: 100 пикселей; ширина: 100 пикселей; цвет фона: желтый;

Что я получаю при преобразовании с масштабированием: .element1 { высота: 100 пикселей; ширина: 100 пикселей; цвет фона: красный; преобразование: масштаб (0,5); преобразование-начало: вверху слева; } .element2 { высота: 100 пикселей; ширина: 100 пикселей; цвет фона: желтый;

Что я хочу получить после преобразования: (этот пример не содержит преобразования, я просто жестко запрограммировал ширину/высоту, так что это не решение) .element1 { высота: 50 пикселей; ширина: 50 пикселей; цвет фона: красный; преобразование-начало: вверху слева; } .element2 { высота: 100 пикселей; ширина: 100 пикселей; цвет фона: желтый;

У меня более динамичный веб-сайт, на который можно добавлять дополнительный контент, и я по-прежнему хочу, чтобы он был хорошо выровнен. Многие решения каким-то образом подсчитывают «высоту», но я считаю, что это может легко сломаться, когда на страницу добавляется больше элементов.

Есть ли в этом примере минималистичный подход, при котором мы можем каким-то четким способом сохранить соответствие друг другу после преобразования?