Question

这是WIP： www.wearethefirehouse.com/wcftest

Logo是来自Illustrator的.SVG。

我的代码是（包括整个部分的透视图，可能是冲突的div？）：

<!-- Intro Header -->
<header class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <img src="img/master-logo-white.svg" alt="Wine Country Flooring Logo">
                    <a href="#about" class="btn btn-circle page-scroll">
                        <i class="fa fa-angle-double-down animated"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

如果你缩小浏览器窗口，你会发现它很好，然后跳了一下，最后在你进入移动视口的时候解决了一个无用的大迭代。

如何让它干净利落？

这是我第一次使用SVG而且我知道我需要使用更多的东西......用火试试吧？

任何帮助将不胜感激！

Answer 1

这与SVG无关。由于Bootstrap以及基于页面宽度调整页面元素大小的方式，它正在四处跳跃。

如果您不希望它跳得那么多，您可以使用不同的引导程序样式。例如：

<div class="col-md-12>
    <img src="img/master-logo-white.svg" alt="Wine Country Flooring Logo">
    <a href="#about" class="btn btn-circle page-scroll">
        <i class="fa fa-angle-double-down animated"></i>
    </a>
</div>

缩放SVG <img/>以适合视口

1 个答案: