【问题标题】: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;
    }

【讨论】:

    猜你喜欢
    • 2015-08-18
    • 1970-01-01
    • 2013-06-16
    • 1970-01-01
    • 1970-01-01
    • 2013-05-23
    • 1970-01-01
    • 1970-01-01
    • 2014-06-18
    相关资源
    最近更新 更多