Html 相应缩放css动画徽标，由多个不同大小的重叠图像组成_Html_Css_Responsive Design_Overlay

Html 相应缩放css动画徽标，由多个不同大小的重叠图像组成

html css responsive-design

Html 相应缩放css动画徽标，由多个不同大小的重叠图像组成,html,css,responsive-design,overlay,Html,Css,Responsive Design,Overlay,所以我在制作一个多图像、叠加、动画的徽标时遇到了一些问题以下是该标志的重新设计：我已经为此挣扎了几个小时，并且已经尽了我所能。我使用了CSS转换，一些html技巧，但它似乎不起作用主要的问题是，由于图像大小不同，我可以使用一个简单的方法来缩小最大的图像 max-width:90vw; 但较小的重叠图像并没有缩小比例有人能帮我做一个有响应性的标志吗我尝试过的事情：使容器为相对容器，使所有子容器为绝对容器一些CSS显示了欺骗（会随着人们的推荐而不断添加）好吧，如果您绝对只需要一

所以我在制作一个多图像、叠加、动画的徽标时遇到了一些问题

以下是该标志的重新设计：

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

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

max-width:90vw;

但较小的重叠图像并没有缩小比例

有人能帮我做一个有响应性的标志吗

我尝试过的事情：

使容器为相对容器，使所有子容器为绝对容器
一些CSS显示了欺骗
（会随着人们的推荐而不断添加）

好吧，如果您绝对只需要一个HTML/CSS响应徽标，我已经成功实现了以下实现：

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

另外，我暂时删除了动画，因为有很多不必要的CSS干扰了这个布局。您可以再次实现它

HTML:

您最好使用SVG来实现这一点……更简单。事实上，SVG正是您在这里需要的，您可以缩放整个标题——我将通过SVG研究解决方案，但与此同时@Tasos的解决方案工作得非常好：D

<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>

#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;
    }