Partage
  • Partager sur Facebook
  • Partager sur Twitter

image SVG dans DIV

Agrandir une image SVG dans une DIV en CSS

    19 novembre 2019 à 17:14:40

    Bonjour à toutes et à tous, 

    Voilà que je cherche partout sur le web depuis plusieurs et après de nombreux essais... impossible de trouver ce que je cherche. 

    Je souhaiterais être en capacité d'augmenter ou réduire la taille d'une image que j'ai converti en SVG via "Adobe Illustrator". 

    Dans le cadre du développement de mon site web, j'utilise les Flexbox afin de pouvoir placer les élément ou je le souhaite. Pour y voir plus clair j'organise mon site avec des div. Je suis capable d'insérer mes image svg via la propriété CSS suivante : 

    .img_principal

    {

    background: url("../images/search_result/catlogo.svg");

    background-repeat: no-repeat;

    background-size: auto auto;

    border: 2px solid black;

    border: noe;

    width: 100%; 

    height: 100%;

    }

    Remarque : La div ".img_principal" se trouve dans une autre div : 
    #img
    {
    border: 3px solid orange;
    width: 50%;
    height: 50%;
    }
    Impossible de trouver comment agrandir mon image de manière à ce qu'elle prenne la totalité de la div ... 
    Je sais que le format SVG change des autres formats d'image tels que le PNG/ GIF/ JPEG. 
    Cependant je souhaiterais pouvoir agrandir mon image tout en gardant ses proportion et tout en respectant les contraintes de taille de ma div. 
    J'ai également essayé d'insérer l'image via le HTML avec la balise <img /> directement dansa div mais même problème impossible de modifier la taille de mon image. 
    Lorsque je paramètre le "width" et le "height" l'image bouge de haut en bas ou de droite à gauche mais ne grossit pas en gardant ses proportion comme je le souhaiterais. 
    Je ne sais pas si mon code est optimisé, j'ignore également si ce que je souhaite réaliser est possible en CSS cependant je me tourne vers la grande communauté d'OpenClassroom afin d'obtenir de l'aide ;), qui je suis sûr me permettra d'avancer sur ce point. 
    Merci à tous d'avance, 
    Vince
    • Partager sur Facebook
    • Partager sur Twitter
      20 novembre 2019 à 8:52:35

      Approfondis la propriété background-size. Elle accepte une valeur comme cover qui devraient résoudre le problème. Tu peux essayer aussi 100% 100%


      • Partager sur Facebook
      • Partager sur Twitter

      Alain - Linkedin

      image SVG dans DIV

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown