web-dev-qa-db-fra.com

Pourquoi mes images SVG ne sont-elles pas redimensionnées à l'aide de la propriété CSS "width"?

Je construis un site Web de portefeuille.

Code HTML

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

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

Le problème est que je ne peux pas redimensionner les SVG en utilisant la propriété CSS width. Voici ce que j'obtiens dans différents cas:

img { width: 2em; }

enter image description here

img { width: 3em; }

enter image description here

img { width: em; }

enter image description here

Veuillez noter comment les icônes se réduisent vers le milieu du hero div.

Au lieu de cela, si j'utilise la propriété CSS height:

img { height: 2em; }

enter image description here

img { height: 3em; }

enter image description here

img { height: 4em; }

enter image description here

Ce comportement est ce dont j'ai besoin, mais je ne suis pas sûr que ce soit la bonne façon. Pourquoi cela arrive? Connaissez-vous de meilleurs moyens de redimensionner les images SVG (en particulier en utilisant le modèle flexbox )?

htmlcsssvgsass
36
Franco Scarpa

Les SVG sont différents des images bitmap telles que PNG, etc. Si un SVG a un viewBox - comme le vôtre l’apparaît -, il sera mis à l’échelle pour s’adapter à la fenêtre définie. Il ne sera pas directement à l'échelle comme le ferait une PNG.

Donc, augmenter le width du img ne rendra pas les icônes plus hautes si la hauteur est restreinte. Vous vous retrouverez avec le img horizontalement centré dans une boîte plus large.

Je crois que votre problème est que vos SVG ont une hauteur fixe définie en eux. Ouvrez les fichiers SVG et assurez-vous qu’ils:

  1. n'ont pas défini width et height, ou
  2. avez width et height tous deux fixés à "100%".

Ceci devrait régler votre problème. Si ce n'est pas le cas, postez l'un de vos SVG dans votre question afin que nous puissions voir comment elle est définie.

54
Paul LeBeau

Vous devez modifier la propriété viewBox pour modifier correctement la hauteur et la largeur avec un svg. C'est dans le <svg> balise du svg.

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

1
Félix Bachand

Je devais le comprendre moi-même, mais certains svgs votre besoin de faire correspondre la fenêtre et la largeur + hauteur en.

Par exemple. s'il a déjà width="x"height="y" alors =>

ajouter <svg ... viewport="0 0 [width] [height]">

et l'inverse.

Après cela, il va évoluer avec <svg ... style="width: xxx; height: yyy;">

1
OZZIE

J'ai le même problème ... et j'ai trouvé une solution simple. Il suffit d'importer l'image SVG avec l'outil suivant et d'exporter: https://editor.method.ac/

0
Lucas Moyano Angelini