Question

This page使我的徽标居中并缩小以适合浏览器窗口。它使用单个PNG文件和带有max-width/max-height的CSS flexbox。（View code）

This page为同一徽标设置动画。但是，为了将波纹效应限制为仅蓝色部分，需要进行一些更改（view code）：

徽标分为两部分，并且彼此堆叠（位置：绝对）。
硬编码徽标的大小。（不再根据浏览器窗口的大小调整大小）

我无法弄清两件事：

如何根据浏览器大小将硬编码大小更改回动态大小？我还对顶部和左侧进行了硬编码，但是如果两个图像的居中和缩放比例相同，则它们应该正确对齐且没有偏移。
~~如何再次垂直/水平居中徽标？我认为我以前的flexbox CSS无法正常工作，因为元素具有位置：绝对。~~ 更新：我能够重新居中工作，但这需要更多的硬编码宽度/高度。

我想我可以通过JavaScript来做到这一点，但是可以使用纯CSS / HTML解决方案吗？（我感觉居中和动态调整元素的位置为position：absolute不可能）。如果禁用JavaScript，则解决方案应正常运行（徽标的两个部分正确对齐；徽标适合浏览器窗口）。

Answer 1

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

使用CSS可以实现这两种功能，只需要在“ logo”类周围使用另一个包装元素即可。该包装器元素可以自然地放置在flexbox内部。之后，只需计算徽标图像和波纹画布所需的比例即可。

.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的相对位置/大小

1 个答案: