css - 为什么 svg 在调整大小改变方面？

Question

我有以下简单的组件：

<template>
    <div class='d-flex justify-content-center'>
        <g-image src='~/assets/bitcoin.svg' width='36' height='36' />
        <h2 class='mx-2'>{{ block_count }}</h2>
        <g-image src='~/assets/bitcoin.svg' width='36' height='36' />
    </div>
</template>

（.svg宽高约64）

在小宽度中提供漂亮的方形图像：

但是一旦我开始增加宽度的窗口大小，它就会伸出.svg

我尝试使用几个g-image'sfit参数但没有运气。

我没有得到什么？

编辑实时 URL 以展示bitcoin-blocks-info-site.s3-website-eu-west-1.amazonaws.com

编辑

似乎当我应用b-container脚手架时，问题就消失了：

<template>
    <b-container>
        <b-row>
            <b-col class='d-flex justify-content-center align-items-center'>
                <g-image src='~/assets/bitcoin.svg' width='36' />
                <h2 class='mx-3 d-inline'>{{ block_count }}</h2>
                <g-image src='~/assets/bitcoin.svg' width='36' />
            </b-col>
        </b-row>
    </b-container>
</template>