縮放的SVG <img>以適應視

這裏的WIP： www.wearethefirehouse.com/wcftest縮放的SVG <img>以適應視

標誌是從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，我知道這是我需要使用更多的東西...試火，對吧？

任何幫助，將不勝感激！

來源

2014-10-31 weslangdon

這與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>

來源

2014-10-31 03:34:38

雖然這有助於它順利地擴展到移動視口，但它並沒有真正幫助解決更大的問題。 1）徽標文件現在巨大開始，我喜歡原始大小。 2）它仍然不能在移動斷點處伸縮。 – weslangdon 2014-10-31 06:27:25

如果您不想使用Bootstrap類，則不必強制使用。只需從你的div中刪除'col-md-12'類，並按照你想要的樣式進行設置。 – 2014-10-31 10:16:18

做了一些調整，並添加了幾個媒體查詢和它的所有工作我想要的和變化是活的。謝謝你的幫助！ – weslangdon 2014-10-31 11:11:37

縮放的SVG <img>以適應視

回答

相關問題