Я створюю веб-сайт портфоліо.

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 за допомогою widthвластивості CSS . Ось що я отримую в різних випадках:

img { width: 2em; }

img { width: 3em; }

img { width: em; }

Зверніть увагу, як піктограми згортаються до середини herodiv.

Натомість, якщо я використовую heightвластивість CSS :

img { height: 2em; }

img { height: 3em; }

img { height: 4em; }

Така поведінка мені потрібна, але я не впевнений, що це правильний шлях. Чому це трапляється? Чи знаєте ви кращі способи зміни розміру зображень SVG (особливо за допомогою моделі flexbox )?

SVG відрізняються від растрових зображень, таких як PNG тощо. Якщо SVG має файл viewBox - як здається вашій, - вона буде масштабована відповідно до визначеного вікна перегляду. Він не буде безпосередньо масштабуватися, як PNG.

Тож збільшення widthзначень imgне зробить піктограми вищими, якщо висота обмежена. Ви просто закінчитеimg горизонтально відцентрований у ширшому полі.

Я вважаю, що ваша проблема полягає в тому, що ваші SVG мають фіксовану висоту, визначену в них. Відкрийте файли SVG і переконайтеся, що вони:

1. не мають widthі heightвизначено, або
2. є widthі heightобидва встановлені на "100%".

Це має вирішити вашу проблему. Якщо цього не сталося, опублікуйте один із своїх SVG у своєму питанні, щоб ми могли побачити, як це визначається.

Мені довелося це зрозуміти самому, але деякі svgs вам потрібні для відповідності viewBox & width + height у.

Наприклад, якщо це вже є width="x" height="y"= =

додати <svg ... viewBox="0 0 [width] [height]">

і навпаки.

Після цього він буде масштабуватися за допомогою <svg ... style="width: xxx; height: yyy;">

1. Якщо файл svg має висоту та ширину, вже визначені width="100" height="100"у файлі svg, додайте це x="0px" y="0px" width="100" height="100" viewBox="0 0 100 100", зберігаючи вже визначені width="100" height="100".
2. Потім ви можете масштабувати svg у своєму файлі css, використовуючи селектор у вашому випадку, imgщоб ви могли зробити це: img{height: 20px; width: 20px;}і зображення буде масштабовано.

Перетворення CSS властивість дозволяє обертати, масштабувати, перекіс, або перевести елемент.

Таким чином, ви можете легко використовувати transform: scale(2.5);опцію масштабування, наприклад, у 2,5 рази.

Вам потрібно змінити viewBoxвластивість, щоб правильно змінювати висоту та ширину за допомогою svg. Це в <svg>тегу svg.

https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox

Ви також можете скористатися цією transform: scale("")опцією.