title: Why svg in <g-image> is resized changing aspect?
body: <p>I have the following simple component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class='d-flex justify-content-center'&gt;
          &lt;g-image src='~/assets/bitcoin.svg' width='36' height='36' /&gt;
          &lt;h2 class='mx-2'&gt;{{ block_count }}&lt;/h2&gt;
          &lt;g-image src='~/assets/bitcoin.svg' width='36' height='36' /&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>(the <code>.svg</code> is around 64 in width and height)</p>
  
  <p>Which in small widths gives nice square images:</p>
  
  <p><a href="https://i.stack.imgur.com/M5LDr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M5LDr.png" alt="enter image description here"></a></p>
  
  <p>but as soon as I start increasing the window size in width it streches out the <code>.svg</code></p>
  
  <p><a href="https://i.stack.imgur.com/Maa9v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Maa9v.png" alt="enter image description here"></a></p>
  
  <p>I've tried to use a couple of <code>g-image</code>'s <a href="https://gridsome.org/docs/images/#fit-options" rel="nofollow noreferrer"><code>fit</code> parameters</a> but with no luck.</p>
  
  <p>What am I not getting here?</p>
  
  <p><strong>EDIT</strong> Live URL to showcase <a href="http://bitcoin-blocks-info-site.s3-website-eu-west-1.amazonaws.com" rel="nofollow noreferrer">bitcoin-blocks-info-site.s3-website-eu-west-1.amazonaws.com</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>It seems that when I apply <code>b-container</code> scaffolding then the problem goes away:</p>
  
  <pre><code>&lt;template&gt;
      &lt;b-container&gt;
          &lt;b-row&gt;
              &lt;b-col class='d-flex justify-content-center align-items-center'&gt;
                  &lt;g-image src='~/assets/bitcoin.svg' width='36' /&gt;
                  &lt;h2 class='mx-3 d-inline'&gt;{{ block_count }}&lt;/h2&gt;
                  &lt;g-image src='~/assets/bitcoin.svg' width='36' /&gt;
              &lt;/b-col&gt;
          &lt;/b-row&gt;
      &lt;/b-container&gt;
  &lt;/template&gt;
  </code></pre>