因此，我有一些困难，使一个多图像，叠加，动画标志成为响应。
这是对标志的重新制作：https://jsfiddle.net/vk0w42z6/
我已经挣扎了几个小时了，我已经尽力了。我用过css转换，一些html技巧，但似乎不起作用。
主要问题是，由于图像大小不同，我可以使用一个简单的
max-width:90vw;
但较小的、覆盖的图像并没有缩小。
有人能帮我把这个标志做个反应吗？
我尝试过的事情：
使容器成为相对的，所有子容器都是绝对的
一些css显示了欺骗。
（会随着人们的推荐而不断增加）
最佳答案
好吧，如果您绝对只需要一个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;
}