Я создаю портфолио.
Код 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)?