Ich baue eine Portfolio-Website auf.

HTML Quelltext

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

CSS-Code (mit 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;
        }
    }
}

Das Problem ist, dass ich die Größe von SVGs mithilfe der CSS- widthEigenschaft nicht ändern kann . Folgendes erhalte ich in verschiedenen Fällen:

img { width: 2em; }

img { width: 3em; }

img { width: em; }

Bitte beachten Sie, wie Symbole in der Mitte des heroDiv zusammenfallen.

Wenn ich stattdessen die CSS- heightEigenschaft verwende:

img { height: 2em; }

img { height: 3em; }

img { height: 4em; }

Dieses Verhalten ist das, was ich brauche, aber ich bin mir nicht sicher, ob dies der richtige Weg ist. Warum passiert das? Kennen Sie bessere Möglichkeiten zur Größenänderung von SVG-Bildern (insbesondere mit dem Flexbox-Modell )?

SVGs unterscheiden sich von Bitmap-Bildern wie PNG usw. Wenn ein SVG viewBox- wie es Ihren scheint - ein hat, wird es so skaliert, dass es zu seinem definierten Ansichtsfenster passt. Es wird nicht direkt skaliert wie ein PNG.

So ist die Erhöhung widthder imgnicht die Symbole jeder größer machen , wenn die Höhe begrenzt ist. Sie werden nur mit der imghorizontal zentrierten in einem breiteren Feld enden .

Ich glaube, Ihr Problem ist, dass in Ihren SVGs eine feste Höhe definiert ist. Öffnen Sie die SVG-Dateien und stellen Sie sicher, dass sie entweder:

1. habe keine widthund heightdefiniert, oder
2. haben widthund heightbeide setzen auf "100%".

Das sollte dein Problem lösen. Wenn dies nicht der Fall ist, geben Sie eine Ihrer SVGs in Ihre Frage ein, damit wir sehen können, wie sie definiert ist.

Ich musste es selbst herausfinden, aber einige SVGs müssen mit der ViewBox & Breite + Höhe übereinstimmen.

ZB wenn es schon width="x" height="y"dann = = hat

hinzufügen <svg ... viewBox="0 0 [width] [height]">

und das Gegenteil.

Danach wird es mit skalieren <svg ... style="width: xxx; height: yyy;">

1. Wenn für die SVG-Datei bereits eine Höhe und Breite width="100" height="100"in der SVG-Datei definiert ist, fügen Sie diese hinzu, x="0px" y="0px" width="100" height="100" viewBox="0 0 100 100"während Sie die bereits definierte beibehalten width="100" height="100".
2. Anschließend können Sie das SVG in Ihrer CSS-Datei mithilfe eines Selektors in Ihrem Fall skalieren, imgdamit Sie dies tun können: img{height: 20px; width: 20px;}Das Bild wird skaliert.

Sie müssen die viewBoxEigenschaft ändern, um die Höhe und Breite mit einem SVG korrekt zu ändern. Es befindet sich im <svg>Tag des SVG.

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

Sie können die transform: scale("")Option auch verwenden .

Mit der CSS-Eigenschaft zum Transformieren können Sie ein Element drehen, skalieren, verzerren oder übersetzen.

So können Sie die transform: scale(2.5);Option ganz einfach verwenden, um beispielsweise das 2,5-fache zu skalieren.