Почему мои SVG-изображения не масштабируются с использованием свойства "ширина" CSS?

Я создаю портфолио.

Код HTML

<div id = "hero">
   <div id = "social">
      <img src = "facebook.svg">
      <img src = "linkedin.svg">
      <img src = "instagram.svg">
    </div>
</div>

CSS-код (с использованием SASS)

#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;

    #social {
        width: 50%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        img {
            width: 2em;
        }
    }
}

Проблема заключается в том, что я не могу изменять размер SVG с помощью свойства CSS width. Вот что я получаю в разных случаях:

img { width: 2em; }

введите описание изображения здесь

img { width: 3em; }

введите описание изображения здесь

img { width: em; }

введите описание изображения здесь

Обратите внимание, что значки сжимаются к середине div hero.

Вместо этого, если я использую свойство CSS height:

img { height: 2em; }

введите описание изображения здесь

img { height: 3em; }

введите описание изображения здесь

img { height: 4em; }

введите описание изображения здесь

Это поведение - то, что мне нужно, но я не уверен, что это правильный путь. Почему это происходит? Знаете ли вы лучшие способы изменения размера изображений SVG (особенно с использованием модели flexbox)?

Ответы

Ответ 1

SVG отличаются от растровых изображений, таких как PNG и т.д. Если SVG имеет viewBox - как кажется вам, то он будет масштабироваться, чтобы соответствовать определенному видовому экрану. Он не будет напрямую масштабироваться, как PNG.

Таким образом, увеличение width img не приведет к тому, что значки будут выше, если высота будет ограничена. Вы просто закончите с img по горизонтали в более широком поле.

Я считаю, что ваша проблема в том, что ваши SVG имеют фиксированную высоту, определенную в них. Откройте файлы SVG и убедитесь, что они либо:

  • не определены width и height, или
  • имеют width и height оба установлены в "100%".

Это должно решить вашу проблему. Если это не так, отправьте один из ваших SVG в свой вопрос, чтобы мы могли видеть, как он определяется.