缩放 SVG <img> 以适应视口答案

【问题标题】：Scaling an SVG <img> to fit viewport缩放 SVG <img> 以适应视口
【发布时间】：2014-10-31 11:34:38
【问题描述】：

这是在制品： 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，我知道我需要更多地使用它……试一试，对吧？

任何帮助将不胜感激！

【问题讨论】：

标签： html css web svg responsive-design

【解决方案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>

【讨论】：

虽然这有助于它平稳地扩展到移动视口，但它并没有真正解决更大的问题。 1) 标志文件现在很大，我喜欢原来的大小。 2) 它仍然无法在移动断点处扩展。
如果您不想使用 Bootstrap 类，则不必强制使用。只需从您的 div 中删除 col-md-12 类并按照您的需要设置样式。
进行了一些调整并添加了几个媒体查询，所有这些都按照我的意愿工作，并且更改是实时的。感谢您的帮助！