Почему SVG в изменен ли изменяющийся аспект? - PullRequest
Новая
       62

Почему SVG в изменен ли изменяющийся аспект?

0 голосов
/ 13 апреля 2020

У меня есть следующий простой компонент: 

<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 по ширине и высоте)

Что при небольшой ширине дает хорошие квадратные изображения:

enter image description here

но как только я начинаю увеличивать размер окна по ширине, он вытягивает .svg

enter image description here

Я пытался использовать пару g-image fit параметров , но безуспешно.

Что я здесь не получаю?

РЕДАКТИРОВАТЬ Live URL для демонстрации bitcoin -blocks-info-site.s3-website-eu-west-1.amazon aws .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>
...