Maintenir le rapport d'aspect svg et l'échelle au plus petit axe

Question

J'ai un svg qui est défini sur 100% de largeur, en remplissant un conteneur. Le conteneur est défini sur 100% du corps, de sorte que lorsque la fenêtre du navigateur est réduite sur l'axe des x, le svg se réduit de sorte qu'il reste à 100% de largeur et redimensionne en conséquence.

Cependant lorsque I puis rétrécir la fenêtre sur l'axe des y, le svg reste tel quel. Je veux qu'il reste toujours avec des proportions contraintes (, c'est-à-dire un carré restant à 1: 1 en toutes circonstances), mais l'échelle doit être 100% du plus petit axe.

.svg-container { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 


.svg { 
    width: 100%; 
    height: 100%; 
} 

À l'heure actuelle, il se rétracte sur l'un des axes, mais il deviendra rectangulaire ou l'autre manière, en battant mon objectif de maintenir le ratio d'aspect original.

Quelqu'un peut-il offrir une solution qui conserve les proportions, tout en conservant 100% du plus petit axe de la fenêtre?

Answer 1

Je pense , parce que votre réservoir est de 100% de la hauteur de la page , votre .svg est de se ratatinée. Essayez ceci ...

.svg-container { 
     position: relative; 
     width: 100%; 
     height: auto; 
    }