Pourquoi mes images SVG ne sont-elles pas mises à l'échelle en utilisant la propriété CSS "width"?
Je suis en train de construire un site portfolio.
Code HTML
<div id = "hero">
<div id = "social">
<img src = "facebook.svg">
<img src = "linkedin.svg">
<img src = "instagram.svg">
</div>
</div>
Code CSS (à l'aide de 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 suis pas en mesure de redimensionner SVGs à l'aide de la CSS width
de la propriété. Voici ce que j'en obtenir dans les différents cas:
img { width: 2em; }
img { width: 3em; }
img { width: em; }
Veuillez noter la façon dont les icônes effondrement vers le milieu de la hero
div.
Au lieu de cela, si j'utilise le CSS height
propriété:
img { height: 2em; }
img { height: 3em; }
img { height: 4em; }
Ce comportement est ce dont j'ai besoin, mais je ne suis pas sûr que ce soit la bonne façon. Pourquoi cela se produit? Savez-vous de meilleures façons de resizeing images SVG (en particulier en utilisant le flexbox modèle)?
source d'informationauteur Franco Scarpa
Vous devez vous connecter pour publier un commentaire.
SVGs sont différents que les images bitmap (PNG, etc. Si une SVG a un
viewBox
- comme la vôtre semble - il va être mise à l'échelle est défini de la fenêtre d'affichage. Il ne sera pas directement à l'échelle comme une PNG serait.L'augmentation de la
width
de laimg
ne vais pas en faire des icônes plus grand si la hauteur est limitée. Vous aurez juste à la fin avec leimg
centré horizontalement dans une plus large zone.Je crois que votre problème est que votre SVGs ont une hauteur fixe définie en eux. Ouvrir les fichiers SVG et assurez-vous qu'ils soit:
width
etheight
défini, ouwidth
etheight
toutes les deux à"100%"
.Qui devrait résoudre votre problème. Si ça ne marche pas, poste un de vos SVGs dans votre question afin que nous puissions voir comment il est défini.
Vous devez modifier le
viewBox
la propriété de changer la hauteur et la largeur correctement avec un svg. C'est dans le<svg>
tag de la svg.https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox