Как сохранить относительные позиции / размеры динамически измеряемых суммированных элементов

Question

Эта страница центрирует и сжимает мой логотип, чтобы поместиться в окне браузера. Он использует один файл PNG и flexbox CSS с max-width/max-height. ( Просмотр кода )

Эта страница анимирует тот же логотип. Однако, чтобы ограничить волновой эффект только синей частью, потребовались некоторые изменения ( просмотр кода ):

• Логотип разделен на две части и сложен друг на друга (позиция: абсолютная).
• Жестко закодирован размер логотипа. (Размер больше не зависит от размера окна браузера)

Я не могу понять две вещи:

• Как изменить жестко запрограммированные размеры обратно на динамические размеры в зависимости от размера браузера? Я также жестко закодировал верхнюю и левую части, но если два изображения отцентрированы и масштабированы в одинаковом соотношении, они должны правильно выстраиваться без смещений.
• Как снова расположить логотип по вертикали / горизонтали? Я думаю, что мой предыдущий CSS-код flexbox не работает, потому что элементы имеют положение: абсолютное. Обновление: Я смог снова начать центрирование, но это потребовало более жестко заданных ширины / высоты.

Я думаю, что могу сделать это через JavaScript, но возможно ли чисто CSS / HTML решение? (У меня есть чувство, центрирующее и , динамически изменяющие размеры элементов с позицией: абсолютная может быть невозможна). Если JavaScript отключен, решение должно изящно ухудшиться (две части логотипа выровнены правильно; логотип помещается в окне браузера).

Answer 1

Пример: https://jsfiddle.net/2rdjfwhb/1/

Можно сделать и то, и другое с помощью CSS, вам просто нужен еще один элемент-обертка вокруг класса "logo".Этот элемент обертки может быть размещен внутри флексбокса.После этого нужно просто рассчитать соотношение, которое вам нужно для вашего логотипа и холста.

.parent {
    max-height: 100%;
    max-width: 100%;
}

.logo {
    width: 100%;
    height: 100%;

    position: relative; /* Parent handles centering this guy now */
}

.logo-ligature {
    width: 100%;
    height: 100%;
    position: relative; /* Positioned for z-index */
    pointer-events: none;
}

.logo-background {
    background-image: url(https://cdn.glitch.com/b2cea96d-c2a3-486e-90d5-f60a651a36e3%2Fle_square_light_noborder.png?1553791477453);
    background-size: contain;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    width: 75%;
    height: 75%;
    position: absolute;
    top: 12.5%;
    left: 12.5%;
}