縮放SVG <img> 適合視口

Question

這是WIP：www.wearethefirehouse.com/wcftest

徽標是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>