响应式缩放由多个重叠的不同大小图像组成的 css 动画徽标
Posted
技术标签:
【中文标题】响应式缩放由多个重叠的不同大小图像组成的 css 动画徽标【英文标题】：Responsively scale css-animated logo made up of multiple, overlayed, different-sized images 【发布时间】：2015-09-26 04:38:31 【问题描述】：所以我在使多图像、叠加的动画徽标变得响应时遇到了一些麻烦。
这是徽标的再现：https://jsfiddle.net/vk0w42z6/
我已经为此苦苦挣扎了几个小时，并且尽我所能。我使用了 CSS 转换和一些 html 技巧，但它似乎不起作用。
主要问题是由于图像大小不同，我可以使用简单的方法来缩小最大的图像
max-width:90vw;
但较小的叠加图像不会按比例缩小。
那么有人可以帮我让这个徽标响应吗？
我尝试过的事情：
使容器相对，所有子容器都是绝对的 一些 CSS 显示技巧。 （会随着人们推荐的东西不断添加）【问题讨论】：
您最好使用 SVG 来实现这一点……更简单。事实上 SVG 正是你需要的， 你可以缩放整个标题 -- jsfiddle.net/9hb8k8qb 我将通过 SVG 研究解决方案，但与此同时 @Tasos 的解决方案运行良好。 :D 【参考方案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 id="compass-top"
class="compass-top " src="http://icanindia.org/go-sxse/medias/img/spoke-only-white.png "
>
<div style="clear:both;"></div>
</div>
<img
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;
【讨论】：
以上是关于响应式缩放由多个重叠的不同大小图像组成的 css 动画徽标的主要内容，如果未能解决你的问题，请参考以下文章