Question

所以我在制作多图像，叠加，动画徽标变得敏感方面遇到了一些麻烦。

我几个小时以来一直在努力，并尽我所能。我已经使用了CSS转换，一些html技巧，它似乎并没有起作用。

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

max-width:90vw;

但较小的叠加图像没有按比例缩小。

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

我尝试过的事情：

使容器相对，所有孩子绝对
一些CSS显示技巧。
（将继续添加人们推荐的东西）

Answer 1

好吧，如果您只需要一个HTML / CSS响应式徽标，我已成功实现此实现，如下所示： jsfiddle

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

P.S。我现在删除了动画，因为有很多不必要的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;
    }

响应缩放由多个叠加的不同大小的图像组成的动画徽标

1 个答案: