如何维护动态大小、堆叠 div 的相对 positions/sizes

Question

This page centers and shrinks my logo to fit in the browser window. It uses a single PNG file and CSS flexbox with max-width/max-height. (View code)

This page animates the same logo. However, in order to limit the ripple effect to just the blue portion, some changes were needed (view code):

徽标分为两部分并相互堆叠 (position:absolute)。
硬编码徽标的大小。（不再根据浏览器的大小调整大小 window）

两件事我想不通：

如何根据浏览器尺寸将硬编码尺寸改回动态尺寸？我也对顶部和左侧进行了硬编码，但是如果两个图像居中并按相同的比例缩放，它们应该正确排列而没有偏移。
~~如何 vertically/horizontally 再次使徽标居中？我认为我以前的 flexbox CSS 不起作用，因为元素有 position:absolute.~~ 更新： 我能够重新居中工作，但这涉及更多的硬编码 width/heights。

我想我可以通过 JavaScript 做到这一点，但是纯粹的 CSS/HTML 解决方案可能吗？（我有一种感觉，以和为中心动态调整 position:absolute 元素的大小可能是不可能的）。如果 JavaScript 被禁用，解决方案应该优雅地降级（徽标的两部分正确对齐；徽标适合浏览器 window）。

Answer 1

示例：https://jsfiddle.net/2rdjfwhb/1/

可以使用 CSS 来完成这两项操作，您只需要在 "logo" class 周围添加另一个包装元素。这个包装器元素可以自然地放置在 flexbox 中。之后就是计算徽标图像和波纹所需的比率 canvas.

.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%;
}

如何维护动态大小、堆叠 div 的相对 positions/sizes

How to maintain relative positions/sizes of dynamically sized, stacked div's

html

javascript

css

css-position