响应式缩放由多个重叠的不同大小图像组成的 css 动画徽标答案

【问题标题】：Responsively scale css-animated logo made up of multiple, overlayed, different-sized images响应式缩放由多个重叠的不同大小图像组成的 css 动画徽标
【发布时间】：2015-09-26 04:38:31
【问题描述】：

所以我在使多图像、叠加的动画徽标变得响应时遇到了一些麻烦。

这是徽标的再现：https://jsfiddle.net/vk0w42z6/

我已经为此苦苦挣扎了几个小时，并且尽我所能。我使用了 CSS 转换和一些 html 技巧，但它似乎不起作用。

主要问题是由于图像大小不同，我可以使用简单的方法来缩小最大的图像

max-width:90vw;

但较小的叠加图像不会按比例缩小。

那么有人可以帮我让这个徽标响应吗？

我尝试过的事情：

使容器相对，所有子容器都是绝对的
一些 CSS 显示技巧。
（会随着人们推荐的东西不断添加）

【问题讨论】：

您最好使用 SVG 来实现这一点……更简单。事实上 SVG 正是你需要的，
你可以缩放整个标题 -- jsfiddle.net/9hb8k8qb
我将通过 SVG 研究解决方案，但与此同时 @Tasos 的解决方案运行良好。 :D

标签： html css responsive-design overlay

【解决方案1】：

好吧，如果你绝对只需要一个 HTML/CSS 响应式徽标，我已经设法实现了这个实现，如下所示： jsfiddle

您可以玩弄百分比值，直到满意为止。这应该可以满足您的大部分需求。

附：我现在删除了动画，因为那里有很多不必要的 CSS 干扰了这个布局。你可以再次实现它。

HTML：

<body style="background-color:#1c1c1c;">
  <div style="width:100%;" >
    <div style="position: relative; max-width:800px; width: 100%;">

    <div id="compass">
                    <img alt=" compass-top " id="compass-top"
                class="compass-top " src="http://icanindia.org/go-sxse/medias/img/spoke-only-white.png "
                width="100%" > 

                <div style="clear:both;"></div>
                </div>


                    <img alt="base-2 "
                class="compass-bottom-2 " src=
                "http://icanindia.org/go-sxse/medias/img/sxse_logo_no_compass.png " style=
                "max-width: 800px; width:100%; height:auto; float:left;" >           
                 <div style="clear:both;"></div>         
                </div>

            </div>
</body>

CSS：

#compass{
        width:20%;
        position:absolute;
        left:37%;
        background:url("http://icanindia.org/go-sxse/medias/img/back-only-white.png ");
        background-size:100%;
        background-repeat:no-repeat;
    }

【讨论】：